React UI components
184 components, installed as source you own. Each page shows the component, the exact file the CLI writes, and what it needs to work.
Foundation2
Forms44
- Animated ChecklistA task list whose boxes fill with a bounce and whose done tasks fade and strike through, with an add row.
- App StackA pile of app icons that fans out on hover and opens into a multi-select picker whose icons fly to their tiles.
- Assignee PickerA pill of overlapping faces that opens a multi-select list of people; new faces fly into the stack.
- CalendarA date grid for selecting a day, several days or a range.
- CheckboxA control for an on/off choice, with support for an indeterminate state.
- ComboboxA searchable single-select built on the ARIA combobox pattern.
- Confirm TypedType the name to confirm — and be told, not ignored, when it does not match.
- Copy ButtonCopies a value to the clipboard and morphs its icon and label into a confirmation that reverts on its own.
- Cron EditorA schedule as a cron expression, with a plain-language reading and the next runs.
- Date PickerA button that opens a calendar to pick a date or a date range.
- DialA rotary dial input — a knob inside a filling arc with detent ticks — turned by drag, wheel or keys.
- Dot Morph ButtonA pill button led by a dot that stretches into a bar on hover and keyboard focus.
- Drag StepperA pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.
- Effect ButtonA Button with a hover and focus micro-interaction — slide-arrow, pulse, rotate, shake, glare, text reveal, expanding ring or clip corners.
- Expanding SearchA search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.
- Exposure SliderA camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.
- File UploadA dropzone over a real file input, plus the upload queue nobody ships.
- FormAccessible field wiring that works with any form library, or none.
- Image SelectorA photo grid with a Select mode: tick photos, see the count, share or delete them, and reset.
- Inline ConfirmA destructive button that asks in place — it widens into Keep / Delete, then offers a timed Undo.
- InputA single-line text field with size variants and native validation styling.
- LabelAn accessible caption that associates text with a form control.
- Liquid ToggleA switch whose knob squashes like a droplet as it travels, and can be dragged across.
- Magnetic ButtonA button that drifts toward the pointer — optionally with its label leaning further — and springs back when it leaves.
- Magnetic SelectA honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.
- Morph ButtonA button whose icon and label morph to an active state — toggles, transient confirmations and hover affordances.
- Notify ButtonA “notify me” toggle: the bell rings and the label grows elastically into the confirmation.
- OTP InputA one-time-code field drawn as a row of animated slots — paste, SMS autofill, masking and grouping included.
- Radio GroupA set of mutually exclusive options.
- Range DialA 24-hour circular two-thumb range — drag or key the start and end round a ticked clock face, with the duration in the middle.
- Reorder ListA short list of people or things you put in order by dragging liquid pills, or with Space and the arrow keys.
- ScrubberA design-tool number field: drag across a labelled bar to scrub a value, step it from the keyboard, or type it.
- Secret FieldAn API key in its three states: shown once, hidden but revealable, and gone.
- SelectPicks one value from a short list of options.
- Selection ListA multi-select list of people with a liquid tick and an action that springs out from under it once someone is picked.
- Shortcut RecorderPress the keys you want: records a chord, platform-aware, and says when it clashes.
- Slide to ConfirmA 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.
- SliderSelects a value, or a range, from a continuous span.
- Slosh SliderA slider whose fill behaves like liquid: the knob jumps to the value while the fill springs after it, leaning as it moves.
- Social SelectorPick a social platform from a row of icons — a pill slides behind the choice and the caption links to the profile.
- SwitchAn immediate on/off toggle for settings that apply straight away.
- Tags InputA list of short values, where invalid entries stay visible instead of vanishing.
- TextareaA multi-line text field, with optional auto-resize and a character count that knows when to stay quiet.
- Time Range PickerA time range whose value is an expression, so it stays relative across a reload.
Overlays11
- Account MenuAn avatar that opens an account panel of collapsible sections — edit the profile, check recent orders.
- Context MenuA right-click menu that pops from the pointer with a spring and staggers its items in — same parts as Dropdown Menu.
- DialogA modal window that interrupts the user to gather a response.
- DrawerA bottom sheet that can be dismissed by dragging it down.
- Dropdown MenuA menu of actions revealed from a trigger, with submenus and selectable items.
- Gooey PopoverA round trigger whose popover pours out of it, melted together by an SVG goo filter.
- Morph SurfaceA dock that grows in place into a panel — a feedback form or a quick prompt — and shrinks back when done.
- PopoverRich floating content anchored to a trigger.
- Rich PopoverA popover card for an inline reference — heading or link, description, a meta chip and one call to action.
- SheetA panel that enters from an edge of the viewport for secondary content.
- TooltipA short label revealed on hover or keyboard focus.
Navigation13
- BreadcrumbWhere the current page sits in the hierarchy, and how to get back up it.
- Browser TabsA 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.
- Canvas ToolbarA 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.
- CommandA searchable command palette, with groups and a ⌘K dialog variant.
- Create MenuA DropdownMenu with a morph flourish: a "+ Create" pill that grows in place into its menu panel.
- Focus Blur LinksA row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.
- Goo TabsDowel 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.
- Magnify DockA macOS-style dock whose icons grow, lift and show a label as the pointer or keyboard focus passes over them.
- PaginationNavigation between pages of a list.
- Radial MenuA round button whose options fan out along an arc: press and drag onto one, click, or walk the ring with the keyboard.
- SidebarThe application's own navigation: a collapsible rail on a wide screen, an overlay on a narrow one.
- StepperA 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.
- TabsSwitches between panels of related content.
Display33
- 3D CarouselA 3D carousel of cards — a fanned arc or a CoverFlow path — with buttons, dots, arrow keys and swipe.
- Action NodeA 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.
- Aspect MorphA picture that smoothly reshapes between aspect ratios, picked from a segmented control with a sliding thumb.
- AvatarAn image representation of a user or entity with a graceful text fallback.
- Avatar GroupOverlapping avatars that spread apart on hover or keyboard focus, collapsing the rest into a "+N" count.
- BadgeA compact marker for status, counts and categories.
- BookA 3D book cover drawn in CSS that tilts, or swings open to reveal its first page, on hover and keyboard focus.
- CardA surface that groups related content and actions into a single block.
- Card SpreadA stack of cards that fans into an arc, row, corner fan, stamp arc, cascade, dealt hand or wheel on hover, focus or click.
- Card StackA pile of cards you step through as a receding deck, or that fans out into an arc on hover and focus.
- Comment BubbleA canvas comment pin — an avatar in a speech-bubble corner that grows into the thread and a reply composer.
- Expandable CardsCards that open into a detail view — widening in place in a row, or growing out of a grid into a modal.
- Expandable ListA list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.
- Glow CardCard surfaces with a soft glow that follows the pointer, alone or continuously across a group.
- Image AccordionImage panels in a row — the open one widens and shows its caption, the rest stand as narrow strips — opened by hover, focus or press.
- Image MetadataAn image with a row of actions and a details button that opens a metadata panel, lifting the image to make room.
- Invite CarouselEvent invitations fanned out as tilted cards — the current one upright in front, its neighbours leaning behind — advancing on a timer or by hand.
- IslandA pill that morphs between views — idle, a call, a timer, a player — resizing around whatever it shows.
- MarqueeScrolls its children in a seamless, endless loop — horizontal or vertical, at a set speed, pausing on hover and focus.
- Now PlayingA compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.
- Number FlowA number whose digits roll to each new value — counters, prices, percentages and compact figures, formatted by Intl.NumberFormat.
- Photo StackA pile of photos: flick the top one away and it springs to the back, or tap, key or button through them.
- Photo TabsA photo with a floating bar of icon tabs; each tab swaps the photo.
- Pixel AvatarA deterministic pixel avatar generated from a seed — crisp SVG, coloured from theme tokens, with a gentle shimmer.
- Product CardA shop tile with image zoom, badge, half-star rating, discount pricing, a wishlist toggle and an add-to-cart confirmation.
- Reviews CarouselTestimonials stacked in depth — the active review in front, the next ones receding behind — stepped through with buttons, indicators or arrow keys.
- Star CountAn animated star counter — plain or as a star button — with the stargazers' avatars beside it. The count is a prop; nothing is fetched.
- Swipe CarouselCards on a ring seen from the front — swipe, tap or step and the ring turns, so nothing ever leaves the frame.
- Switchboard CardA feature card illustrated by a grid of tiny lights — a lit pattern such as a word, or random flicker.
- Tilt CardA 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.
- Time StackCards receding in depth, stepped through with a timeline scrubber, the mouse wheel or the arrow keys.
- Todo TowerTo-do cards stacked like bricks: tick one and it flicks away as the cards above drop; drag one and the stack sways.
- Tweet CardA social post drawn from props — author, text, photos, date and counts — with a link out to the original. No network, no embed script.
Data24
- AccordionVertically stacked sections that expand to reveal their content.
- Activity FeedA chronological list of events, with a connecting timeline rail.
- Code BlockA block of code with a copy control, ready for any highlighter.
- Contribution GraphA GitHub-style year heatmap of daily counts — a keyboard-navigable grid with a tooltip per day.
- Data TablePresentation for a TanStack Table instance: sorting, column visibility and pagination.
- Diff ViewerA diff you can style, and accept or reject hunk by hunk.
- Dither AreaAn area chart filled with dithered cells over a cell grid, with a date scrubber that swells the cells around it.
- Dither BarStacked bars drawn in dithered cells that grow on change, with series highlighting on hover and a per-column readout.
- Dither CanvasThe engine behind the dither charts: a DPR-capped, self-pausing canvas loop, token colours, a deterministic cell hash, springs, geometry and a keyboard scrubber.
- Dither DonutA donut chart drawn in shimmering dithered cells, with wedges that pop out and sparkle on hover, focus or pin.
- Dither FunnelA conversion funnel of dithered stage bars that morph between periods, with overall and step conversion per stage.
- Dither GaugeA half-circle gauge drawn in dithered cells, one sweeping ring per metric, with a centre reading and metric switch.
- Dither HeatmapA rows × columns intensity grid drawn in dithered tiles that morph between periods, with a keyboard-navigable cell readout.
- Dither LineA smooth monotone line over a drifting dithered gradient fill, with a keyboard-operable point scrubber.
- Dither MeterA capacity bar drawn in dithered cells, split into categories that fill with a spring, with a category legend.
- Dither ScatterA bubble scatter drawn in dithered cells: floating bubbles sized by value that glide between data sets, with a per-point readout.
- DNS RecordAdd this record at your provider: parts copied separately, checked with what was found.
- Log ViewerA streaming console with filtering, level facets and follow mode.
- Metric DeltaA headline number with a change indicator that knows which direction is good.
- Permission MatrixRoles across, permissions down, with inheritance, locked roles and one tab stop.
- Record DiffField-level before and after, for audit entries, settings history and revisions.
- TableSemantic table primitives for tabular data.
- Tick ProgressA percentage drawn as a row of waveform ticks under a big figure — a progress bar, or a slider with hover preview.
- Uptime MatrixA day-by-day status history drawn in dithered tiles — operational, degraded, outage — with a keyboard-navigable readout and legend.
Feedback17
- AlertA callout that draws attention to an important message.
- Bar LoaderIndeterminate loading indicators made of bars — cascade, equalizer, wave physics, an indeterminate sweep and 17 more motions.
- Dots LoaderIndeterminate loading indicators made of dots — pulse, bounce, ripple, orbit and 21 more motions.
- Empty StateShown where content would be, explaining why it is empty and what to do next.
- Grid LoaderIndeterminate loading indicators on a grid of cells — 48 patterns (and 17 SmoothUI alias names) that pulse or stagger, plus sequence, thinking and matrix.
- MeterA measurement against a capacity — quota, seats, spend — segmented by category.
- Notification BadgeA dot, rolling count or presence badge pinned to the corner of an icon, button or avatar.
- ProgressShows how far along a task is, or that one is running at all.
- Pull to RefreshA 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.
- Ring LoaderIndeterminate loading indicators made of rings and spinners — classic, sweep, radar, gears and 26 more motions.
- Session ExpiryThe idle-timeout warning WCAG 2.2.1 asks for: warned, extendable, and not dismissable by accident.
- Shape LoaderIndeterminate loading indicators made of geometric shapes — flipping squares, hexagons, hourglasses, hearts and 31 more motions.
- SkeletonA shaped placeholder that holds layout while content loads.
- SpinnerAn indeterminate loading indicator for buttons, panels and inline content.
- Sync StatusOffline, saving, saved or failed — with the count of changes being held.
- Text LoaderIndeterminate loading indicators made of words and interface shapes — shimmer, typing, skeleton, terminal and 15 more motions.
- ToastBrief, non-blocking messages with an imperative API callable from anywhere.
Layout2
AI24
- AI Action LedgerWhat an agent actually did, classified by what can be undone.
- AI Agent PlanWhat an agent intends to do — including when it changes its mind mid-run.
- AI Agent StatusA pill showing what an agent is doing, in words as well as colour.
- AI Approval RequestApprove a tool call — after correcting the arguments the model got wrong.
- AI ConversationThe scrolling transcript container, with follow-on-new-content and a status region.
- AI DisclosureTells a reader they are looking at AI, and what is actually known about it.
- AI Extraction ReviewCheck extracted fields against the document they came from, and decide each one.
- AI Inline CompletionGhost-text suggestion inside a real textarea, accepted with Tab.
- AI LoaderA labelled AI waiting indicator — thinking dots, an indeterminate bar or a thinking grid — with an optional elapsed-seconds counter.
- AI MessageOne turn in a conversation, with role, avatar, actions and footer slots.
- AI Model SelectorPicks the model a conversation runs on, with descriptions and availability.
- AI Prompt InputThe composer: auto-growing textarea, send-on-Enter, and a send/stop control.
- AI ReasoningA collapsible disclosure for the model's reasoning.
- AI ResponseAssistant response text, with a streaming caret and a thinking indicator.
- AI SourcesInline citation markers and the source list they refer to.
- AI Structured OutputAn object arriving field by field from the model, without the layout jumping.
- AI Suggested ValueAn AI-proposed value for any form control, pending until accepted and marked afterwards.
- AI Token UsageA gauge showing how much of the context window a conversation has used.
- AI Tool CallA collapsible record of a tool the model called, its arguments and its result.
- ArtifactA titled frame for something the model produced, with preview and code panes that slide along one axis and a copy action.
- BranchAlternative versions of a conversation turn — regenerated answers, edited prompts — with a wrapping pager between them.
- Command BarA compact one-row prompt bar — auto-growing field, dictate toggle and send — composed from AI Prompt Input.
- Orb FaceA cartoon assistant orb whose gaze follows the pointer, who blinks, and whose expression tells its state — listening, thinking, speaking, done or broken.
- SuggestionsPrompt suggestion chips for a chat's empty state or follow-ups, arriving from the centre of the row outwards.
Effects14
- Cursor FollowA dot that trails the pointer on a spring inside a container and swells into a label over marked elements.
- Escape ButtonA novelty button that scoots away from an approaching mouse, then gives up after a few escapes.
- Folding FrameA photo folded shut like a book in 3D — drag across it (or use the keys) to open the cover until it lies flat.
- Glass BubbleA draggable glass lens that refracts the content under it, with a specular highlight and chromatic fringing.
- Goo BallA decorative jelly ball you drag around a well: it stretches along its velocity and squashes against the walls.
- Gradient OrbAn animated gradient orb — a rotating conic mesh with a dot screen, sheen and bloom — that can follow an AI state and a live audio level.
- Palette GeneratorA row of swatches that melt together through a goo filter and pop back out in a new palette.
- Scramble TextText whose characters churn through random glyphs and resolve from the inline start, on hover, focus, mount or view.
- Scroll Reveal TextA paragraph whose words brighten from dim to full as it scrolls through the viewport.
- Shader TransitionTransitions a frame between two states under a full-frame WebGL reveal — one raw-WebGL engine and sixteen presets (aperture, chroma, prism, SDF blobs and circles, noise, wipe, stripes, spiral…).
- Shimmer TextText with a light band sweeping across it on a loop, or a blur-and-glide entrance as it arrives.
- Text EffectText that animates in by character, word or line — blur, rise, mask, spring, centre-out, phrase builds and a wave, as 19 presets.
- Text SwapText that animates from the old string to the new one when its value changes — fade through, shared axis X/Y/Z and per-word crossfade — with a TextRotate for cycling phrases.
- Typewriter TextTypes text a character at a time behind a blinking caret — once, on a loop, or cycling through a list.