59 animated UI components built with GSAP (2026)

This page lists all 59 animated UI components in the vault. A component here is not a page and not a decorative page effect: it is one working control, with its states, its keyboard handling and its motion already built, that you paste into an interface you already have. Eleven are completely free, with live demos you can drive below.

If you came looking for animation you drop onto a marketing page, that is the GSAP animation examples list. If you want a whole deployable site, that is the animated website templates list, and the GSAP templates guide explains what one includes. This page is the component shelf: the docks, dialogs, palettes, tables and form controls an application is assembled from.

Here are the facts if you want the short version. There are 59 UI components. Eleven are free. The downloads use plain HTML, CSS and JavaScript with no build step or framework required, and load GSAP from a CDN. CSS custom properties control the visual styling; check each product’s preview and README for its available themes and options. Individual components are £10, a component kit is £25, and all of them are included in the Vault.

Components are grouped below by the job they do. Each group has its own page with the full grid, a customisation walkthrough and its own FAQ, linked from the section heading.

Table of contents

• What counts as an animated UI component?
• The eleven free components
• Navigation and menus
• Overlays and dialogs
• Search, filtering and tables
• Inputs and form controls
• Buttons, loaders and feedback
• Component kits
• How to choose one
• Try a bottom sheet before adapting it
• How to drop one into a project
• Pricing and licensing

What counts as an animated UI component?

An animated UI component is a control whose motion is part of how it works, not decoration layered on afterwards. A modal that scales up from nothing tells you nothing. A modal that grows out of the button you pressed tells you where you are and how to get back, which is the whole argument for animating interface at all.

That is the line every component here is built on. The bottom sheet snaps to a detent chosen by how fast you flicked it. The tooltip travels between targets rather than blinking out and back, so you can read three of them in a row without losing your place. The data table re-sorts by moving each row visibly to its new position instead of repainting in one invisible frame. In each case the animation is carrying information a static swap throws away.

The engineering underneath is ordinary GSAP, which is the point. Nothing here needs a component library, a state manager or a design system you have to adopt. Most run on GSAP core alone; the ones that morph between layouts use Flip, the ones you drag use Draggable, and the scroll-linked rail uses ScrollTrigger. All of those plugins are free.

The eleven free components

Eleven components are free, MIT licensed, and downloadable without an account. They are also mirrored in the free GitHub repo. They are built to exactly the same standard as the paid ones rather than cut down, so opening any of their folders tells you what the code is like everywhere else on this page.

iOS Toggle Switch

Live demo Open in new tab ↗

A settings toggle built on a real checkbox, so it submits, labels and focuses like one. The knob can be tapped or dragged, snaps to whichever side it is nearer when you let go, stretches while it is held down, and cross-fades the track colour rather than switching it. Uses Draggable. The right starting point if you want to see how a native input and a GSAP animation are made to agree with each other. View the iOS Toggle Switch.

Copy to Clipboard Button

Live demo Open in new tab ↗

A snippet block whose copy button morphs its clipboard icon into a stroke-drawn check, floats a “Copied” pill up beside it, and flashes the lines of code it just took so you can see what landed on your clipboard. No plugins at all, just core GSAP over SVG stroke and transforms. Drop it on documentation code blocks, install commands, API keys and share links. View the Copy to Clipboard Button.

Animated Tabs

Content tabs where the indicator does the work: it slides and stretches between tabs measured from each tab’s own box, and the panels follow it a frame later with a short directional slide while the container eases between heights so nothing below jumps. An underline style and a pill style ship from one attribute, the list scrolls with an edge fade on a phone, and the keyboard model is the tabs pattern with wrapping arrows. No plugins. For settings pages, product detail views and any dashboard panel that switches between a few views. View the Animated Tabs.

FAQ Accordion

An FAQ block where each answer opens on a measured height tween with its text rising a beat behind, and the plus turns into a minus rather than swapping icons. In one-open mode the closing and opening answers share one timeline, so the question you clicked stays where it is instead of jumping. Expand all, collapse all and deep links to a single answer are built in, and closed answers stay in the page so find-in-page still reaches them. No plugins. For pricing and billing FAQs, help centres, product pages and support sections. View the FAQ Disclosure Accordion.

Fullscreen Hamburger Menu

A hamburger button that morphs into an X while a full-screen overlay wipes in from the top on a clip path and its links stagger up behind it. It is a real focus-trapped menu rather than a CSS dropdown pretending to be one, which is what separates a studio header from a template header. Built for agency and portfolio sites with four to six top-level destinations, and for mobile navigation on marketing pages. View the Fullscreen Hamburger Menu.

Collapsible Sidebar Menu

A documentation-style sidebar with collapsible sections that open on a measured height tween rather than a guessed one, rotating chevrons, and an indicator rail that slides to the active link. Takes a nav long enough to be unusable and folds it down to something scannable. For knowledge bases, admin navigation with grouped destinations, and settings screens. View the Collapsible Sidebar Menu.

Scrollspy Table of Contents

A sticky table of contents beside a long article, with a marker that slides to the section currently in view and a reading-progress line running down the rail. Clicking a heading scrolls smoothly to it. Uses ScrollTrigger and ScrollToPlugin. The correct component for API references, long-form editorial, legal pages, changelogs and numbered onboarding guides. View the Scrollspy Table of Contents.

Star Rating

A five-star rating built on native radio inputs. Hovering sweeps the fill up to the pointer with a stagger, clicking locks it in with a spring pop, a sparkle, and a cross-faded word describing the score. No plugins. For product and order reviews, post-support satisfaction prompts, course and recipe feedback, and any rating field that should feel worth filling in. View the Star Rating.

Progress Stepper

Numbered steps joined by a track whose fill tweens to the active step, with completed nodes flipping their number into a drawn checkmark. No plugins. For multi-step checkout, onboarding wizards, long applications split into sections, and upload and publish pipelines where people need to know how much is left. View the Progress Stepper.

Skeleton Loader

Shimmering placeholder cards that crossfade into real content with a stagger, each card’s height tweening from the placeholder shape to whatever it actually loaded. That height tween is the detail most skeleton implementations skip, and it is the one that stops the page jolting. No plugins. For feeds and dashboard lists waiting on an API, product grids fetched after first paint, and infinite scroll. View the Skeleton Loader.

Announcement Bar

A top bar that tweens its own height, so the page below genuinely rides down with it on entry and reflows up on dismiss — nothing overlaps your header and nothing jumps. Messages are list items in the markup, not a JavaScript array, and each one exits upward through a mask while the next one’s words rise in on a stagger, with a progress track showing the time to the next. Rotation pauses on hover, on keyboard focus and while the tab is hidden. Four types set both the accent and how the bar is announced, and a storage key remembers a dismissal. For shipping and sale promos, maintenance notices and version announcements. View the Announcement Bar.

Navigation and menus

Eleven components for the part of the interface every visitor touches, and the part that most quickly gives away a product assembled from defaults. Five of them are free and sit in the section above. Browse them as a grid on the navigation components page.

macOS Dock Navigation

A macOS-style floating dock. Icons magnify on a cosine falloff driven by quickTo setters, so no tween is allocated per mouse move, a running-app dot springs between icons as the active item changes, and badge counts pop when the number changes. Icons drag to reorder with the neighbours opening a gap through Flip. Suits dashboard quick actions, app shells where people pin their own tools, and any site that wants Apple-tier polish in the chrome. View the macOS Dock Navigation.

Animated Mega Menu

Header navigation whose flyout container morphs between measured panel sizes instead of popping from one shape to the next, with the cards inside staggering in behind it. It is the difference between a menu that feels like one surface and a menu that feels like three separate boxes sharing a hover state. For marketing sites with multi-column navigation, apps with grouped feature menus, and docs sites with sectioned resource menus. View the Animated Mega Menu.

Animated Pill Navbar

A tab bar whose pill is genuinely magnetic: it leans toward the cursor while you are inside a link, stretches in proportion to how far it has to travel, and scrolls a narrow bar to keep the active link in view. No plugins. A setActive method keeps it in sync with a router, so it works as real single-page-app navigation rather than only as a demo. Good for docs and product sub-navigation, dashboard section switchers, and pricing tabs. View the Animated Pill Navbar.

Bottom Navigation Bar

A mobile app tab bar with an indicator that slides and stretches between tabs, an icon that springs up on selection, and a notification badge that pops. No plugins. Built for installable web apps, phone-width app shells and mobile dashboards, and useful in prototypes and design reviews where you want a real tab bar rather than a picture of one. View the Bottom Navigation Bar.

PDF Document Viewer

A document reader whose page-position control expands into thumbnails and contents with a connected Flip transition. Readers can search selectable PDF text, change zoom or switch to an author-supplied HTML reading edition with mapped pages and adjustable text. On phones the navigator becomes a bottom sheet; local PDFs stay in the browser. For reports, handbooks and product guides with a reviewed reading companion. View the PDF Document Viewer.

PDF Flipbook

A PDF shown as a bound book: two-page spreads with a cover, and pages that curl as you drag, flick or click them, with the next real page on the back of each leaf. Settled pages keep selectable text and working links, arrow keys and a page-jump field turn without the pointer, and reduced motion swaps the curl for a crossfade. On phones it shows one page at a time. For brochures, catalogues, menus and magazines. View the PDF Flipbook.

Overlays and dialogs

Ten components for everything that arrives on top of the page. This is the family where motion earns the most, because an overlay has to explain where it came from and where it will go back to. Browse them on the overlay and dialog components page.

Animated Modal Dialog

A whole dialog system built on one GSAP Flip morph: any trigger on the page becomes the dialog and then becomes the trigger again on close. It ships three placements, dialog stacking so a confirm can sit over a form, a validated form inside, and the full overlay contract of focus trapping, scroll locking and backdrop dismissal. The side placement becomes a bottom sheet on a phone. For invite and settings dialogs launched from a row’s own button, and for destructive actions that need a confirm on top. View the Animated Modal Dialog.

Draggable Bottom Sheet

A multi-detent bottom sheet with peek, half and full positions, snapped by release velocity rather than by where your finger stopped. The hard part is solved: content inside the sheet scrolls normally, and only hands the gesture back to the sheet when the list is already at the top. Uses Draggable. For mobile filter and sort panels, map and search results that need a peek state, action sheets, and cart summaries. View the Draggable Bottom Sheet.

Toast Notifications

A complete toast system rather than a single animated notice: five types, an action button that resolves back to your own code so Undo actually undoes, a countdown that pauses while the pointer is over it, swipe-to-dismiss, and a promise helper that morphs one toast through loading, success and failure. No plugins. For save and deploy flows, destructive actions with an undo window, and live feeds where several notices land at once. View the Toast Notifications.

Slide-Out Drawer

A right-hand slide-in panel with a dimmed backdrop, a fixed header that stays put while the body scrolls, and drag-to-close on the x axis so it can be dismissed with a thumb. Uses Draggable. The workhorse of app shells: settings panels, cart and checkout drawers, listing filters, and detail inspectors opened from a table row. View the Slide-Out Drawer.

Right-Click Context Menu

A right-click menu that springs out of the corner nearest the pointer, clamps itself inside the viewport so it never opens off-screen, and flies a submenu out sideways. Items stagger in, and it opens on long press on touch. No plugins. For file and asset managers, canvas and editor tools that replace the browser menu, and data tables with per-row operations. View the Right-Click Context Menu.

Animated Tooltip

One floating bubble serves every target on the page. Position, width, height and the arrow all tween, so the tooltip travels from one target to the next instead of blinking out and back in. Read three tooltips in a row and it feels like a single object following your attention. For dense settings and billing panels, icon toolbars with no room for labels, and pricing pages explaining inline terms. View the Animated Tooltip.

Product Onboarding Tour

A product tour that dims the whole page except a spotlight cutout, then morphs that cutout from target to target while a tooltip card with Back, Next and Skip follows it. Because the cutout moves rather than redraws, the tour reads as one continuous explanation instead of a slideshow. For first-run onboarding in a dashboard, feature announcements pointing at the control that changed, and in-app help. View the Product Onboarding Tour.

Cookie Consent Banner

A consent manager rather than a notice: the compact card Flips into a taller preferences panel, tweening its width, height and position so the type never distorts, and each category is a real switch with a springy knob. Every route out resolves to one object of category booleans, stores it with a version stamp and dispatches a consent:change event you gate your analytics and marketing scripts on. Three positions on one attribute, and only the centred one is modal, because dismissing a consent banner must never count as consent. Uses Flip. For any site in the EU or UK, and anywhere the current banner is a plain bar nobody reads. View the Cookie Consent Banner.

Exit Intent Popup

The trigger rules a real promo popup needs — pointer leaving through the top, scroll depth, a time delay, or your own code — each a data attribute, with once-per-session or once-per-N-days memory so nobody sees the same offer twice in a visit. The entrance is the part you would not hand-roll: the backdrop’s blur ramps up while the offer panel and the content panel slide in from opposite sides and meet, then the headline words rise through a mask. Full modal contract, and the page behind is locked on both <html> and <body> so the reader lands back exactly where they opened it. For first-order discounts, newsletter captures and abandoned-cart saves. View the Exit Intent Popup.

Notification Bell Dropdown

A bell with an unread badge that opens an anchored inbox: All and Unread tabs with a sliding indicator, rows that land a frame after the panel, and a badge count that rolls digit by digit when it changes. Marking a row read on the Unread tab collapses it out while the others close the gap, dismissing one reflows the list, and new notifications slide in at the top with the panel still open. On a phone it becomes a full-width sheet with the full modal contract. Uses Flip. For app headers, admin consoles and any product that tells people what changed since they last looked. View the Notification Bell Dropdown.

Search, filtering and tables

Five components for finding things and re-ordering them. Every one of them animates a change in a list, which is exactly where an interface most often loses the user. Browse them on the search and command components page.

Cmd+K Command Palette

A keyboard-first command palette: Cmd+K opens it, results fuzzy-filter as you type, arrow keys move the selection, Enter runs it. No plugins. It is the component that turns a dashboard full of buried settings into something a power user can operate without the mouse, and it takes an afternoon to wire to your own action list. For admin portals, developer tools and documentation sites. View the Cmd+K Command Palette.

Autocomplete Search Dropdown

A search field over a grouped list: rows filter as you type with the matched characters marked inside each result, a highlight slides under the arrow keys, and Enter fills the field. No plugins. Use it anywhere a plain datalist looks unfinished: docs search split by section, admin pickers for customers or tickets, and location, currency or tag fields that need grouping. View the Autocomplete Search Dropdown.

Spotlight Search Modal

Site-wide search launched from a header button or the / key. The button itself morphs into a centred spotlight panel over a blurred backdrop, so the search field visibly comes from the thing you pressed, with grouped results and full keyboard control. For dashboards and SaaS apps, docs sites that need one field across pages and reference, and any header search box that currently throws you to a separate results page. View the Spotlight Search Modal.

Filter Chips

A scrollable row of multi-select filter chips over a results grid. Each chip opens a tick when selected, the row carries its own drawn scrollbar and drags horizontally, the grid re-flows with GSAP Flip so surviving cards travel to their new positions, and the results count counts up to its new number instead of jumping. For portfolio grids filtered by discipline, product listings, job boards with several tag axes, and blog indexes. View the Filter Chips.

Sortable Data Table

A data table with sortable header buttons, a rotating direction arrow and a subtle highlight on the sorted column. Rows re-order with GSAP Flip, so each one visibly travels to its new place and you can follow the row you were reading. For admin tables of accounts and orders, comparison tables readers want to re-rank, and reporting views where the column sort is the main interaction. View the Sortable Data Table.

Inputs and form controls

Nineteen components for the fields people actually have to fill in, including the free iOS Toggle Switch and Star Rating above. Forms are where abandonment happens, and where a control that acknowledges input is worth more than any hero animation. Browse them on the input and control components page.

Pricing Slider

A pricing scrubber with magnetic tier snapping, a value bubble that tracks the thumb, and a monthly/annual switch that re-tweens the price rather than jumping it. Watching the number travel is what makes the saving legible. No plugins. For SaaS pricing pages with seat or usage sliders, quote calculators, and upgrade flows where the plan is chosen before payment. View the Pricing Slider.

Segmented Control

A segmented control whose indicator stretches in proportion to the distance it travels, so a two-step move reads differently from a one-step move. It carries icons, disabled and busy option states for options that load asynchronously, and a strip that scrolls when the options outgrow their container. No plugins. For billing toggles, dashboard view switchers, and timeframe pickers with more ranges than fit on a phone. View the Segmented Control.

Tag Input

A text input that turns Enter or a comma into a chip. Chips pop in with a spring, collapse their own width on removal so the row closes up rather than snapping, and shake when you type one that is already there. No plugins. For skill and topic pickers on profiles, filter and label builders in dashboards, recipient fields on invite dialogs, and keyword entry on publishing screens. View the Tag Input.

Quantity Stepper

A minus and plus stepper whose digits roll vertically like an odometer, with a squash on press, hold-to-repeat for larger jumps, and a refusal shake at the limits so a disabled button is never silent. No plugins. For cart and checkout quantities, seat and guest pickers on booking forms, and any numeric setting where the change should be legible rather than instant. View the Quantity Stepper.

Dual Range Slider

A min and max range with two draggable thumbs that cannot cross, a selected segment that stretches between them, and value bubbles that rise and count while you drag. Uses Draggable. For price and budget filters on marketplaces, date and distance windows on search interfaces, and any pair of values where the gap between them is the answer. View the Dual Range Slider.

OTP Input

A six-box one-time-code field built over a single native input, which is what makes autofill and mobile keyboards behave. Each digit lands with a bounce, a ring slides to the next box, a pasted code fills every box in sequence, and a wrong code shakes and clears itself. No plugins. For two-factor login, email and SMS confirmation steps, and payment confirmation prompts. View the OTP Input.

Multi-Step Form

A three-step form where each completed answer compresses into a summary rail down the side, so the page never feels longer than one question, and the final submit button springs into a confirmation state. No plugins. For onboarding flows that need a little context, lead capture that keeps the conversation focused, and project intake forms that should end with something reassuring. View the Multi-Step Form.

Date Range Picker

A date field that opens a two-month calendar with presets, hover preview of the range, and a fill that sweeps from the start day to the end day the moment you pick it. Month changes slide the grid in the direction of travel. The keyboard walks the grid by day, week and month, Escape returns focus to the field, and dates are built without ever parsing a string, so nothing shifts a day in a timezone behind UTC. No plugins. For reporting periods, bookings, delivery windows and any filter that takes a start and an end. View the Date Range Picker.

Custom Select Dropdown

A replacement for the native select in two forms: a single-select with groups, avatars and typeahead, and a multi-select whose choices become chips inside the field. One highlight pill glides between rows for arrow keys, hover and filtering alike, the tick travels to the new choice, and the panel flips above the field when there is no room below. A hidden native select carries the value so a plain form submits it. No plugins. For assignee pickers, label fields, filters and any form select that deserves better than the browser default. View the Custom Select Dropdown.

Drag and Drop File Upload

A drop zone with type and size limits, file rows that slide in with their progress bar catching up under them, a done state where the bar collapses into a drawn check, and a failed row with Retry. Removing a row collapses it while the rest reflow. Progress in the demo is simulated behind one documented hook that you point at your own upload request. Uses Flip. For contact forms with attachments, artwork and document uploads, and any admin screen that takes files. View the Drag and Drop File Upload.

Drag and Drop Sortable List

A vertical list you reorder by dragging the handle: the lifted row travels with the pointer while the open slot follows it, and on release everything settles onto whole pixels with no leftover transform. The keyboard does the same moves, with Space to lift, arrows to move, Space to drop and Escape to cancel, each announced. On a phone only the handle starts a drag, so the row body still scrolls the page. Uses Draggable. For pipeline stages, checklist steps, priority lists and any settings screen where order matters. View the Drag and Drop Sortable List.

Slide to Confirm Button

A confirmation control with a draggable thumb, progress feedback and a clear completed state. Releasing early returns it to the start, while a two-step button provides an alternative to dragging. Light and dark themes, keyboard controls and reduced motion support are included. For publishing actions, approvals and other steps where an intentional confirmation helps. View Slide to Confirm Button.

Inline Edit Field

An editable value that expands into a field with save and cancel controls, then settles back into the updated text. Validation keeps an invalid value open for correction, and the keyboard supports Enter to save and Escape to cancel. Includes light and dark themes and reduced motion support. For profile details, record names and compact settings. View Inline Edit Field.

Kanban Board

A three-column board where a card lifts and tilts with the pointer’s speed while a slot opens where it will land, and the cards in both columns move aside with Flip. Column counts roll as the card crosses, and a card dropped into Done gets its title struck through. Space, arrows and Escape do the same moves from the keyboard, each announced, and on a phone a long press picks a card up so the page still scrolls. Every move fires one event with the card, both columns and the new position. Uses Flip. For task boards, sales pipelines, content calendars and hiring stages. View the Kanban Board.

Monthly/Annual Pricing Toggle

The Monthly and Annual switch a pricing section uses, together with the prices it drives. Every price rolls digit by digit like an odometer, the width eases when the number of digits changes, and a savings chip calculated from your own plan prices Flips in beside Annual. Currencies come from attributes and are formatted by the browser, so switching pounds to dollars rolls the symbol too, and the new price is announced once rather than per digit. Uses Flip. For SaaS pricing pages, plan comparison sections and upgrade screens. View the Monthly/Annual Pricing Toggle.

Password Strength Meter

A create-password field with a four-segment meter that sweeps in and drains back, a strength label that rolls, and a rule checklist whose ticks draw themselves as each rule is met. The scoring is real rather than decorative: length, character variety, penalties for repeats and runs like 1234, and a common-password check that sees through letter swaps. A confirm field and a submit button that waits for a strong, matching password are included, and the scorer can be swapped for zxcvbn. No plugins. For sign-up flows, password resets and account security settings. View the Password Strength Meter.

AI Chat Interface

A chat panel for an AI feature: a composer that grows with the draft, suggestion chips on the empty state, and replies that stream in word by word behind a caret while the send button turns into Stop. The thread stays pinned to the newest text unless you scroll up, when a Jump to latest pill appears instead of dragging you back. You connect it to your own model through one async generator, so any server endpoint that streams text works, and the reply is announced once when it finishes rather than token by token. No plugins. For in-app assistants, support bots and AI writing tools. View the AI Chat Interface.

Buttons, loaders and feedback

Eight components for the moments between an action and its result, including four free ones above: the Copy to Clipboard Button, Progress Stepper, Skeleton Loader and Announcement Bar. These are the smallest components on the page and the ones users notice most, because they are the only reply the interface gives. Browse them on the button and feedback components page.

Loading Submit Button

A submit button that collapses into a spinner pill and then expands into a success state with a stroke-drawn checkmark, so the wait happens inside the control you pressed rather than beside it. No plugins. For sign-up and checkout forms, save and publish buttons in dashboards, and newsletter captures where the response currently arrives as a spinner floating next to the button. View the Loading Submit Button.

Animated Like Button

A like button that springs its icon, throws a radial burst of pooled particles, and rolls its count over one digit at a time. The particles are pooled rather than created per click, so holding it down does not allocate. No plugins. For post and comment reactions, article claps and saves, upvotes in internal tools, and any counter currently incrementing with no acknowledgement at all. View the Animated Like Button.

Avatar Group

A product-scale collaborator facepile: overlapping avatars that part on hover so you can pick one out, a single tooltip that travels between them, an overflow chip, and a roster popover for the full list. For app bars on documents and boards with live collaborators, project rows showing assignees, and consoles where who is here matters more than who is listed. View the Avatar Group.

Activity Feed Timeline

An activity panel for a record: status changes, comments, attachments, assignments and mentions on a vertical rail, grouped by day, with relative times that keep ticking. A new event streams in by drawing the rail down into its node while the older events move down to make room, a filter collapses the kinds you hide, and older events expand in with a stagger. New activity is announced politely, and one call adds an event from your own code. Uses Flip. For tickets, deals, orders and document history. View the Activity Feed Timeline.

Component kits

Component kits cover complete app surfaces, with shared foundations and reusable parts. A kit is a set of components sharing one token file, which is the only way charts, tables and overlays end up agreeing about surface, ink, radius, spacing and motion.

Ops Console UI Kit

Thirteen dashboard components on one design system: charts, a sortable table, a command bar, overlays and a live feed, in light and dark from a single token file. Deliberately overlapping with elements you can buy singly, because the point of a kit is that everything already agrees rather than that everything is new. Uses Flip. For internal dashboards and admin consoles that need to look designed rather than assembled, incident and on-call tooling, and SaaS analytics surfaces where charts and tables sit side by side. A kit is £25, five singles in price and a whole component library in content. View the Ops Console UI Kit.

Atlas Workspace Console UI Kit

Ten workspace components on one warm, light-first token system: count-up metrics, a workload curve with a keyboard range control, a filterable delivery board, a project inspector that Flips the selected project’s identity into a side panel (a bottom sheet on a phone), team capacity, an approval queue, live activity, a Cmd/Ctrl+K palette whose commands really run, and toasts. An ink theme is one root attribute away. Uses Flip. The counterpart to the Ops Console: where that kit is dark, dense and instrumented, this one is calm and editorial, for creative agencies, client portals and SaaS workspaces that should feel considered rather than technical. View the Atlas Workspace Console UI Kit.

Relay App UI Kit

Fifty-seven components in eight families on one token file, presented as a library rather than a dashboard: an index rail, a search that filters it, and every part shown live at product density, from buttons and fields to a sortable table, a kanban board, charts, a command menu and every overlay. Four of the eight families are screens that also open as working pages, so the issue view really filters, boards, opens a drawer, composes a new issue and answers J, K, Enter and C, while settings, billing and a five-step onboarding do the same for their own jobs. Uses Flip and Draggable. The one to buy when you are building a product surface rather than dressing a page: an issue tracker, an admin console, a workspace, a settings and billing area. View the Relay App UI Kit.

Simmer Mobile App UI Kit

A recipe app component library with grouped lists, timers, nutrition rings, draggable sheets and six connected phone screens. Browse the individual parts or open the app to explore recipes, cook mode, shopping and settings, in light and dark. View the Simmer Mobile App UI Kit.

Rep Fitness App UI Kit

A fitness mobile app library with daily activity, editable workout sets, a rest timer, progress history and a crew feed. The eight connected screens let you log a session, give kudos and add messages to a local chat. Manrope headings, inset card details and cut-corner actions sit on cool graphite with lime in dark mode, and violet in light mode. Includes Draggable sheets, keyboard alternatives and browser-local demo state. View the Rep Fitness App UI Kit.

Fieldset Forms UI Kit

Sixty-two form components on one token file: text, phone, number, masked and one-time-code inputs, selects and comboboxes, date, time, colour and file pickers, a signature pad, the structure between fields (sections, grids, steppers, conditional fields, a repeater) and the feedback after them (validation, an error summary, a submit button that morphs through loading and success). Five complete forms open as working pages, starting with a contact form with artwork upload. Every control drives a real form field, so a plain form submits it. Uses Flip and Draggable. For company sites that need a contact or quote form, checkouts, sign-up and onboarding, applications, and the settings area of any product. View the Fieldset Forms UI Kit.

How to choose one

Pick by the problem in your interface, not by the component name. Almost every component here re-points to a different context with a copy pass and a palette swap, because the interaction is the product and the styling is a variable.

Three practical rules:

• If the user is losing their place, animate the connection. The Animated Modal Dialog, the Spotlight Search Modal and the Product Onboarding Tour all grow out of the thing you pressed and go back to it.
• If a list is changing under them, move the items. The Filter Chips and the Sortable Data Table both use Flip so rows and cards travel rather than teleport.
• If they are waiting, put the wait inside the control. The Loading Submit Button, the Progress Stepper and the Skeleton Loader each answer in the place the user is already looking.

If you are still deciding, start with a free one. The eleven above are built to the same standard as the paid ones, so opening the folder tells you exactly what the code is like everywhere else.

Try a bottom sheet before adapting it

Suppose a mobile listing page needs filters, but visitors need to keep their place in the results. A Draggable Bottom Sheet can hold those controls over the page. A Cmd+K Command Palette serves a different job: helping someone find and run a known action by typing. Choose the interaction before matching its colours to your app.

Try the bottom sheet Open in new tab ↗

Try it in three ways: drag the handle, scroll inside the expanded sheet, then use the handle’s arrow keys and Escape. Check that you can reopen it and continue where expected. Those actions tell you more about its fit than the opening animation alone.

To adapt this delivery demo into filters, replace the example content with your filter fields, give the panel a clear heading and add an Apply action that updates your own results. The component provides the sheet interaction; your application owns the filter state and the result query. Decide whether closing discards unfinished changes or keeps them, and make that behaviour consistent across the close button, Escape and dragging to dismiss.

For a small set of filters that fits comfortably above the results, keeping the fields visible may be simpler. Use the UI elements library to compare controls once you know how much space and interaction the task needs. The Motion design for developers course covers timing, interrupted interactions and reduced motion if you want to practise judging that behaviour yourself.

How to drop one into a project

Every component is static files. There is no compilation, no npm install, no framework to learn. The workflow is:

1. Copy the component block out of index.html. Each demo marks it with comments, and the README lists what is demo furniture rather than part of the component.
2. Link the stylesheet and the script, and load GSAP from a CDN alongside whichever plugin that component names.
3. Choose one of the documented themes, or adjust the CSS custom properties to match your own type, colours and spacing.

For a static page or a server-rendered view, start with the README’s markup and script-loading instructions. In a framework app, adapt the markup and connect initialisation and cleanup to the component lifecycle. A working standalone demo does not remove the need to handle your app’s routing, state or data requests.

Each component’s README documents its markup contract, its options, and its keyboard behaviour, so integrating one is reading a page rather than reverse-engineering a demo.

Pricing and licensing

Here are the facts, stated plainly for anyone comparing options:

• Each UI component is £10. So is an individual effect; a full website template starts at £20, because it is a complete deployable site rather than one control, and a component kit is £25, because it is a whole component library on one design system.
• Eleven components are free, MIT licensed, with no account required.
• The standard license covers unlimited personal and commercial projects. The only restrictions are no redistribution and no competing products.
• Every component is included in the Vault. The Vault covers every current effect, template and UI element, and every future release in those three lines, for a single payment.

Between one component and the whole Vault sits the UI Elements Pass, a one-time payment covering every current and future component in this line. Either way it is a payment rather than a subscription, and future releases arrive in your library at no extra cost.

Try one first, for free

No amount of screenshots answers the only question that matters: is this code good to work with once it is open in your editor? You can answer it without paying anything.

So start with the eleven free components, or with the free effects and templates. They are MIT licensed, download without an account, and are built to the same standard as the paid ones, so wiring one into something real tells you what the rest are like.

If one paid component is all your interface needs, buy just that one: it is yours for unlimited projects, with no subscription and nothing to renew.

Where to start

• Browse all 59 UI components side by side, filtered by family or tier.
• Download the eleven free components and read the code before spending anything.
• Explore the effects library for the page-level animation these sit alongside.
• Read the pricing page to compare a single component, the UI Elements Pass and the Vault.

Browse the UI components →