UI 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.

6 UI elements, no build step

£99£79.20

Halloween: 20% off the Vault until 31 October. Ends in 15d 15h 17m 04s

UI Elements Pass

£50

Every current and future premium UI element and component kit. Includes all 48 premium UI elements and kits available now, plus every future release in this line.

The Vault

£79.20

All 295 premium items in the Vault library, plus future additions to the library.

Browse 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
ui-035 £25

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.

FlipDraggable
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
ui-036 £25

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.

FlipDraggable
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
ui-040 £25

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.

FlipDraggable
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
ui-041 £25

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.

FlipDraggable
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
ui-042 £25

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.

DraggableInertiaPlugin
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
ui-048 £25

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.

FlipDraggable
Browse all 59 UI elements

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. 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. 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. 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. 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.

The kit token block
: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

Compare the 6 components in this category by what they do, what they are built with, and price.
Component What it doesBuilt withPrice
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 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 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 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 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 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

Related guides

59 animated UI components built with GSAP (2026)

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.

Browse all UI elements What GSAP UI elements are
Related categories
Navigation & MenusOverlays & DialogsInputs & Controls