Composable React primitives, live.

Triggers an action or event, with variants for every level of emphasis.

Tells the component primitives which way the writing runs, so menus and sliders mirror with the rest of the page.

A task list whose boxes fill with a bounce and whose done tasks strike through, quieten to muted text and can glide to the bottom, with an add row.

A pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.

A pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.

A date grid for selecting a day, several days or a range.

A control for an on/off choice, with support for an indeterminate state.

Pick a colour from a saturation square, hue and alpha sliders, a hex/rgb/oklch field, swatches or the screen — with a live WCAG contrast reading.

A searchable single-select built on the ARIA combobox pattern.

Type the name to confirm — and be told, not ignored, when it does not match.

Copies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.

A schedule as a cron expression, with a plain-language reading and the next runs.

A button that opens a calendar to pick a date or a date range.

A rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.

A pill button led by a dot that stretches into a bar on hover and keyboard focus.

A pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.

A duration pill that springs apart into hours, minutes and a tick with a gooey melt, clamps and shakes past its ceiling, and merges back on confirm.

A Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.

A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.

A camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.

A formula field with highlighting, autocomplete for variables and functions, the error where it is, and a live result. Evaluated without eval.

A dropzone over a real file input, plus the upload queue nobody ships.

A button with a front and a back face that turns over in 3D on a spring — on hover and focus, or as a toggle on press.

Accessible field wiring that works with any form library, or none.

A button that confirms only after being held: ink sweeps across it while pressed, drains back if let go, and settles into a tick when the hold completes.

A photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.

A destructive button that asks in place — it widens into Keep / Delete, or opens a bin's lid beside a check and a cross, then offers a timed Undo.

A single-line text field with size variants and native validation styling.

An accessible caption that associates text with a form control.

An outlined button that fills with rolling liquid on hover, focus and press — the label inverts as the surface passes it, and a press sloshes it.

A switch whose knob squashes like a droplet as it travels, and can be dragged across.

A button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.

A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.

A button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.

A “notify me” toggle: the bell rings and the label grows elastically into the confirmation.

A one-time-code field drawn as a row of animated slots, with a caret that slides between them and success and error verdicts — paste, SMS autofill, masking and grouping included.

A strength meter and rule checklist under a password field: length, mixed case, a number, a symbol, and not a common password — or your own rules.

A number with a unit: step it, switch between kg and lb or GB and TB with the amount converted, or type "5 lb".

A set of mutually exclusive options.

A 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.

A star rating input with half stars, a springy hover preview and a burst on the chosen star — or a read-only display of any fraction.

A short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.

A Button that sends a ripple out from wherever it is pressed — concurrent ripples stack, and Enter or Space ripple from the centre.

A design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.

An API key in its three states: shown once, hidden but revealable, and gone.

Picks one value from a short list of options.

A multi-select list of people with a liquid tick and an action that springs out from under it once someone is picked.

A Share pill that springs open into a staggered row of share targets, with a built-in copy-link target and an optional hand-off to the native share sheet.

Press the keys you want: records a chord, platform-aware, and says when it clashes.

A track whose grip you slide to the end to confirm — bencho's wash-and-morph pill or SmoothUI's power-off slide — with a press-and-hold path.

Selects a value, or a range, from a continuous span.

A slider whose fill behaves like liquid: the knob jumps to the value while the fill springs after it, leaning as it moves.

Pick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.

An immediate on/off toggle for settings that apply straight away.

A list of short values, where invalid entries stay visible instead of vanishing.

A multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.

A light/dark switch whose sun retracts its rays and is eclipsed into a crescent moon — as an icon button or a switch track.

A time range whose value is an expression, so it stays relative across a reload.

A two-state button that squishes when pressed, springs back on release, and pours its fill out from the centre when it turns on.

A set of toggles whose highlight slides between choices on a spring in single mode, and springs into each pressed item in multiple mode.

An avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.

A confirmation modal whose card springs up out of a blur while the backdrop blurs in behind it; the destructive tone shakes its icon once on open.

A right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.

A modal window that interrupts the user to gather a response.

A bottom sheet that can be dismissed by dragging it down.

A menu of actions revealed from a trigger, with submenus and selectable items.

A round trigger whose popover pours out of it, melted together by an SVG goo filter.

A preview card that grows out of its trigger on a springy overshoot while coming into focus from a blur, with an optional stagger for its contents.

A dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.

Rich floating content anchored to a trigger.

An inline link that previews its destination on hover or focus: the image wipes in from a shimmer while settling from a slight zoom, and the text lines rise in after it.

A popover card for an inline reference — heading or link, description, a meta chip and one call to action.

A panel that enters from an edge of the viewport for secondary content.

A short label revealed on hover or keyboard focus.

A tab bar for phones: the app's top destinations along the bottom of the screen, icon over label, the current one lit, with badges.

Where the current page sits in the hierarchy, and how to get back up it.

A miniature browser window whose tabs are a real tablist: a card-coloured leaf springs under the active tab, and tabs reorder by drag or keyboard.

A Figma-style tool rail: one active tool with a springy fill, a shape slot that swaps its tool from a flyout, and single-key shortcuts.

A searchable command palette, with groups and a ⌘K dialog variant.

A DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.

A file explorer tree whose folders tilt open, whose children unfold in a stagger beside a drawn guide rail, and whose selection glides from row to row.

A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.

Dowel Tabs with a motion flourish: an icon bar whose pill stretches over the old and new tab, then snaps onto the new one, melted together by an SVG goo filter.

A segmented nav bar whose selected item lifts out of the group as its own tile while the rest close back into one piece, all on one spring.

A macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.

A document minimap of hairline dashes, one per section, that swell near the pointer, pulse as the reader scrolls past, and jump to their section on click.

A site header — brand, navigation, actions and a mobile menu — that is static, sticky or hides on scroll, flat at the top and lifted over content.

Site navigation whose top-bar items open menus — a short list of links, or a full mega menu — with hover intent and full keyboard support.

Navigation between pages of a list.

A round button whose options fan out along an arc: press and drag onto one, click, or walk the ring with the keyboard.

Navigation on a ring around a hub: an arc indicator springs to the active item the short way round, and the hub cross-fades to its icon and label.

A vertical navigation list whose active marker springs between rows: a bouncing dot that squashes and stretches, or a dashed rail that hooks into the active row.

A thin bar that fills from the start edge as the page, or a scroll container, is scrolled, smoothed by a spring.

The application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.

A multi-step wizard's progress — connectors fill, finished steps draw a check, and each step's content slides in from the side it comes from.

Switches between panels of related content.

A 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.

A workflow node card whose round action buttons spring out in an arc around its top-end corner on hover or from a More actions trigger.

A picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.

An image representation of a user or entity with a graceful text fallback.

Overlapping avatars that spread apart on hover or keyboard focus, collapsing the rest into a "+N" count.

A compact marker for status, counts and categories.

A 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.

A surface that groups related content and actions into a single block.

A stack of cards that fans into an arc, row, corner fan, stamp arc, cascade, dealt hand or wheel on hover, focus or click.

A pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.

A row of items you scroll through, one or several at a time: native swipe and snap, previous/next, dots, arrow keys, and rotation only when asked.

A canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.

Two versions of one thing stacked — before and after, light and dark — with a divider you drag, hover or step with the keyboard to reveal either.

A countdown to a date whose days, hours, minutes and seconds roll digit by digit, compact or as labelled tiles.

Content on the faces of a cube that turns to show one face at a time — a carousel in three dimensions, by buttons, arrow keys or drag.

A phone, tablet, laptop or browser window drawn in CSS around a screenshot or live UI, with an optional 3D tilt.

Cards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.

A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.

A two-faced card that turns over in 3D: it leans toward the pointer, lifts as it turns, and a sheen sweeps across the faces.

A folder illustration whose sheets fan out on hover and lift out as its flap tips open in 3D when pressed.

Card surfaces with a soft glow that follows the pointer, alone or continuously across a group.

Image panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.

An image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.

Images stood on a slowly turning ring — a circular gallery in CSS 3D that you can drag or turn with the arrow keys.

Event invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.

A pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.

Scrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.

A glTF or GLB model people can turn and zoom, behind a poster, with three.js loaded only when the model is — never without WebGL.

A compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.

A number whose digits roll to each new value, fading at the window's edges and spinning through rapid updates while its width follows the digits — counters, prices, percentages and compact figures, formatted by Intl.NumberFormat.

A pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.

A photo with a floating bar of icon tabs; each tab swaps the photo.

A deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.

A shop tile with image zoom, badge, half-star rating, discount pricing, a wishlist toggle and an add-to-cart confirmation.

An intro that spins a stack of avatars out along a spiral into a ring on staggered springs, then lets the ring orbit slowly with every face upright.

Testimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.

An animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.

Cards on a ring seen from the front — swipe, tap or step and the ring turns, so nothing ever leaves the frame.

A feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.

A card that tilts in 3D toward the pointer, with a glare that follows it and layers that float at their own depth, springing back flat on leave.

Cards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.

To-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.

A social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.

Vertically stacked sections that expand to reveal their content.

A chronological list of events, with a connecting timeline rail.

Hear a chart: each series played as pitch over time, and a slider that steps through it and speaks each value.

A block of code with a copy control, line numbers and highlighted lines, re-shaded from a single accent colour — ready for any highlighter.

Tabs of code snippets — pnpm, npm, yarn, bun — with a springing indicator, a blur cross-fade, a panel that eases to each snippet's height, and a syncKey that switches every instance on the page together and remembers the choice.

A GitHub-style heatmap of daily counts — a keyboard-navigable grid with a tooltip per day, and an optional footer panel that rises over it to rank top projects.

Presentation for a TanStack Table instance: sorting, column visibility and pagination.

A diff you can style, and accept or reject hunk by hunk.

An area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.

Stacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.

The engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.

A donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.

A conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.

A half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.

A rows × columns intensity grid drawn in dithered tiles that morph between periods, with a keyboard-navigable cell readout.

A smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.

A capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.

A bubble scatter drawn in dithered cells: floating bubbles sized by value that glide between data sets, with a per-point readout.

Add this record at your provider: parts copied separately, checked with what was found.

A dotted globe with places and the routes between them, drawn in raw WebGL — turning slowly, draggable, listed for screen readers.

A streaming console with filtering, level facets and follow mode.

A floating bulk-actions toolbar that springs up with a selection: a rolling count, icon actions whose labels spring open on hover or focus, and a rolling pager.

A headline number with a change indicator that knows which direction is good.

Type what you want to see, get filter chips you can edit or remove. The app can supply the parser; a plain field:value one ships.

Roles across, permissions down, with inheritance, locked roles and one tab stop.

A list split into Pinned and the rest, where pressing a row's pin glides it across to the other section while everything else reflows, and an emptied section folds away.

Field-level before and after, for audit entries, settings history and revisions.

Semantic table primitives for tabular data.

A percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.

A day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.

A callout that draws attention to an important message.

Indeterminate loading indicators made of bars — cascade, equalizer, wave physics, an indeterminate sweep and 17 more motions.

Indeterminate loading indicators made of dots — pulse, bounce, ripple, orbit and 21 more motions.

A reaction button that springs open a bar of emoji; picking one — or holding it, or dragging onto it from the button — floats copies up out of the bar.

Shown where content would be, explaining why it is empty and what to do next.

Indeterminate loading indicators on a grid of cells — 48 patterns (and 17 SmoothUI alias names) that pulse or stagger, plus sequence, thinking and matrix.

A heart toggle with a rolling count: liking pops the heart with a ring burst and radiating dots, unliking deflates quietly.

A measurement against a capacity — quota, seats, spend — segmented by category.

A dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.

A round bell button with an unread badge: the bell swings when notifications land — harder when several land at once — and the count rolls.

Notifications resting as a receding deck that springs open into a list on hover, focus or toggle, with cards that slide out when dismissed or swiped and a count that rolls.

Shows how far along a task is, or that one is running at all.

A sheet you pull down to refresh, with rubber-band resistance, a dot ring that fills as you pull and springs that carry the pull's velocity.

Indeterminate loading indicators made of rings and spinners — classic, sweep, radar, gears and 26 more motions.

The idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.

Indeterminate loading indicators made of geometric shapes — flipping squares, hexagons, hourglasses, hearts and 31 more motions.

A shaped placeholder that holds layout while content loads.

An indeterminate loading indicator for buttons, panels and inline content.

A stepped progress track with a play, pause and replay button: the current dot stretches into a bar that fills over its duration.

Offline, saving, saved or failed — with the count of changes being held.

Indeterminate loading indicators made of words and interface shapes — shimmer, typing, skeleton, terminal and 15 more motions.

Brief, non-blocking messages with an imperative API callable from anywhere.

Tiles of different sizes in one tidy grid — the layout behind a feature section or a dashboard overview — single-column on small screens.

A single section that opens and closes, without an accordion's set semantics.

Panels side by side or stacked, with handles to resize them by pointer or keyboard, limits per panel, and panels that collapse.

A horizontal or vertical rule that divides content.

The approval step for an agent surface: correct the agent's arguments, approve once or for the session, or deny with a reason.

Offers a TanStack table's own controls to an agent — read, sort, search, filter, select, page — through the same API the table's controls call.

A form an agent can fill in, read back and submit through the form's own handler — its fields read from the form, private ones never touched.

What the agent did on a surface, with an undo for each call whose tool registered one — and the agent told what was undone.

Step through a finished agent run — each call, what the agent was told, and every take-over and hand-back — by button, slider or playback.

A region an agent can operate through tools — yours or a browser agent's via WebMCP — and a person can take back at any moment.

What an agent actually did, classified by what can be undone.

What an agent intends to do — including when it changes its mind mid-run.

A pill showing what an agent is doing, in words as well as colour.

Approve a tool call — after correcting the arguments the model got wrong.

The scrolling transcript container, with follow-on-new-content and a status region.

Tells a reader they are looking at AI, and what is actually known about it.

Check extracted fields against the document they came from, and decide each one.

Ghost-text suggestion inside a real textarea, accepted with Tab.

A labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.