# UI Component Kits

> Whole component sets on one token file: charts, tables, overlays and controls that agree about surface, ink, radius, spacing and motion, animated with GSAP.

Canonical: https://gsapvault.com/ui-elements/category/component-kits

A kit is what you reach for when the job is a whole surface, not a single component: an admin panel, an ops console, a dashboard. Every piece inside a kit reads from one token file, so charts, tables, overlays and controls agree about surface, ink, radius, spacing and motion before you write a line.

## Why a kit instead of assembling single components

Single components are built to drop into a design that already exists. A kit is the opposite bet: it is the design. Its components are tuned against each other on one set of tokens, so the table header, the modal chrome, the chart axes and the toggle switches share exactly one surface colour, one radius scale and one motion signature. Assembling the same surface from separates means making those decisions yourself, per component.

Some kit components deliberately duplicate elements sold separately, re-skinned onto the kit's system. That is by design: inside the kit they carry its accent and type rules, so a console assembled from it looks authored rather than collected. Buy the single element when you need one piece in your own design; buy the kit when the design is the thing you need.

The animation follows the same logic. One easing vocabulary and one duration scale run through every component in a kit, so a panel opening and a row expanding feel like the same product. It is the difference you notice on the tenth interaction rather than in a screenshot, and it is the part that is genuinely tedious to retrofit.

Mechanically a kit is the same contract as everything else in the catalogue: static files, semantic markup, GSAP from a CDN, custom properties for every token, reduced-motion fallbacks throughout, no build step. It is more files, not a different technology.

## How to build a screen from a kit

A kit ships as one stylesheet of tokens plus per-component markup blocks. You compose a page from the blocks; the tokens keep it coherent.

1. **Copy the includes once:** One stylesheet and one script cover the whole kit, alongside the GSAP CDN tag it was built against. Individual components do not bring their own includes.
2. **Compose your layout from the component blocks:** Each component is a markup block in the kit's index.html. Copy the panels, tables and controls your screen needs into your own grid; each finds its elements when the script initialises.
3. **Retune the token file, not the components:** Surface, ink, accent, radius, spacing and duration live in one custom-property block at the top of the stylesheet. Change them there and every component follows at once.
4. **Bind your data:** Tables, counters and charts render the values in the markup or exposed init calls. Point them at your data source; the animation layer does not care where numbers come from.

```css
:root {
  --surface: #101014;
  --ink: #e8e6df;
  --accent: #ff5c33;   /* signals, live indicators */
  --radius: 10px;
  --duration: 0.35s;   /* one motion scale, kit-wide */
}
```

## Component Kits at a Glance

| Component | What it does | Built with | Price |
| --- | --- | --- | --- |
| [Ops Console UI Kit](https://gsapvault.com/ui-elements/ops-console-ui-kit) | A browsable component library for building an operations console: fifty-eight components on one token file, from buttons and fields to charts, gauges, an incidents table, a log viewer and four assembled screens, dark and light. | Flip, Draggable, InertiaPlugin | £25 |
| [Atlas Workspace Console UI Kit](https://gsapvault.com/ui-elements/atlas-workspace-console) | A browsable component library for a light, warm workspace app: fifty-nine components on one token file, from buttons and fields to tables, kanban, charts, schedules and overlays, plus four assembled screens, in a porcelain light theme and a deep ink one. | Flip, Draggable, InertiaPlugin | £25 |
| [Relay App UI Kit](https://gsapvault.com/ui-elements/relay-app-ui-kit) | A browsable component library for building a product: fifty-seven components on one token file, from buttons and fields to tables, kanban, charts and overlays, plus four screens that open as working pages, dark and light. | Flip, Draggable, InertiaPlugin | £25 |
| [Simmer Mobile App UI Kit](https://gsapvault.com/ui-elements/simmer-mobile-app-ui-kit) | A phone app component library on one token file: tab bar, collapsing large titles, grouped lists with swipe actions, sheets that drag between detents, wheel pickers, timers and nutrition rings, plus six working screens of a recipe app, light and dark. | Flip, Draggable, InertiaPlugin | £25 |
| [Rep Fitness App UI Kit](https://gsapvault.com/ui-elements/rep-fitness-app-ui-kit) | A fitness mobile app component library with daily steps, workout logging, rest timers, progress charts, kudos and local crew chat. | Draggable, InertiaPlugin | £25 |
| [Fieldset Forms UI Kit](https://gsapvault.com/ui-elements/fieldset-forms-ui-kit) | A browsable library of form controls and form structure on one token file: text, number, phone, masked and one-time-code inputs, selects, comboboxes, date, time, colour and file pickers, steppers, validation, error summaries and success states, plus five complete forms that open as working pages, light and dark. | Flip, Draggable | £25 |

## Components in This Category

### Ops Console UI Kit

A browsable component library for building an operations console: fifty-eight components on one token file, from buttons and fields to charts, gauges, an incidents table, a log viewer and four assembled screens, dark and light.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/ops-console-ui-kit)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/ops-console-ui-kit.md)

### Atlas Workspace Console UI Kit

A browsable component library for a light, warm workspace app: fifty-nine components on one token file, from buttons and fields to tables, kanban, charts, schedules and overlays, plus four assembled screens, in a porcelain light theme and a deep ink one.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/atlas-workspace-console)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/atlas-workspace-console.md)

### Relay App UI Kit

A browsable component library for building a product: fifty-seven components on one token file, from buttons and fields to tables, kanban, charts and overlays, plus four screens that open as working pages, dark and light.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/relay-app-ui-kit)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/relay-app-ui-kit.md)

### Simmer Mobile App UI Kit

A phone app component library on one token file: tab bar, collapsing large titles, grouped lists with swipe actions, sheets that drag between detents, wheel pickers, timers and nutrition rings, plus six working screens of a recipe app, light and dark.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/simmer-mobile-app-ui-kit)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/simmer-mobile-app-ui-kit.md)

### Rep Fitness App UI Kit

A fitness mobile app component library with daily steps, workout logging, rest timers, progress charts, kudos and local crew chat. Cool graphite and lime, a violet light theme, Manrope headings, and eight connected app screens.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/rep-fitness-app-ui-kit)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/rep-fitness-app-ui-kit.md)

### Fieldset Forms UI Kit

A browsable library of form controls and form structure on one token file: text, number, phone, masked and one-time-code inputs, selects, comboboxes, date, time, colour and file pickers, steppers, validation, error summaries and success states, plus five complete forms that open as working pages, light and dark.

- Type: UI component kit · Tier: premium · Difficulty: advanced
- [View component](https://gsapvault.com/ui-elements/fieldset-forms-ui-kit)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/fieldset-forms-ui-kit.md)

## Related Guides

- [59 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) ([Markdown](https://gsapvault.com/blog/gsap-ui-components.md)): 59 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

## Frequently Asked Questions

### How is a kit different from buying the elements separately?

A kit's components are designed as one system: shared tokens, one accent logic, one motion scale. Separates are each neutral enough to join your design; a kit brings its own. Some kit pieces intentionally duplicate single elements, re-skinned onto the kit's system for exactly that reason.

### Can I use only part of a kit?

Yes. Components are independent markup blocks sharing one stylesheet and script, so a page can use three of them or all of them. Unused blocks simply stay out of your markup.

### Can I mix kit components with single elements from the catalogue?

Technically yes, they are all the same kind of static files. Visually the kit pieces carry the kit's tokens, so expect to retune one side or the other; the token blocks make that a small job.

### Are kits included in the Vault and the UI Elements Pass?

Yes. Kits are part of the UI elements line, so the UI Elements Pass and the Vault both cover every current and future kit.

## Related Categories

- [Navigation & Menu Components](https://gsapvault.com/ui-elements/category/navigation-menus)
- [Overlay & Dialog Components](https://gsapvault.com/ui-elements/category/overlays-dialogs)
- [Input & Control Components](https://gsapvault.com/ui-elements/category/inputs-controls)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects, UI components and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt