The UI kit for AI products: live agent views, chat, app screens and marketing blocks for React, installed as source you own.
Modal on the native dialog element.
A soft light rendered as crisp ordered-dither dots: a glow that eases after the pointer, a rising horizon or flowing noise. Canvas, redrawn only while the light changes.
Installation with CLI and Manual tabs: a shadcn add command per package manager, and numbered manual steps (dependencies, registry items, each file with its target) on a rail with callouts.
Docs layout composing the docs blocks: optional sidebar, a reading or wide content column, a right rail, previous / next cards and a Need help card.
Docs page header: breadcrumb, title, lead, a Copy page split button with a menu of more actions, and previous / next arrows.
Preview / Code card with a toolbar: phone, tablet and full widths, zoom, a preview-only theme, Replay and Full screen, plus a named-example heading with a badge slot.
A docs sidebar built on Sidebar: search, filter chips, sections, categories and pages with counts, New and Pro marks, upcoming pages marked Soon, remembered folds and the current page scrolled into view.
A docs site in one component: a home with search and category cards, then pages with the docs sidebar, page header, install steps, callouts, table of contents and previous/next links. Demo pages for a fictional product, replace them.
Right rail with a nested, scroll-aware On this page list, optional links (e.g. Contribute) and cards, and a floating pill below xl.
A quiet dot grid with a soft light that follows the pointer and lifts the dots under it. CSS only.
Ready-made menus on Menu: account, row actions and pickers with avatar, toggle, link and badge rows.
Quiet animated scenes for no runs, an empty inbox, no tools and no agents, with title, description and action.
404 with search and popular links, 500 with retry, a status link and a copyable error ID, and Maintenance with a live ETA and a notify-me form. Each takes an illustration.
A stack of cards that fans out on hover or keyboard focus and restacks on leave or blur. A tap toggles it on touch. Each card rotates around a point below the stack, with a short stagger. Card content is a slot; spread angle and gap are props. Transform-only, no motion on first render, instant under reduced motion.
Questions in an accordion with topic chips, accent-insensitive search, copyable #question-id deep links that open on load and hash change, and a Still have questions card. Stacked or split layout.
Features in 3 or 4 columns with icon, title, text and an optional link, plus a bento variant with wide, tall and large cards that can hold a picture or a live component.
The shared look of text fields: hairline ring, soft focus ring and a red ring when invalid. Used by Input, Textarea, Select and Combobox.
Drop zone with type/size/count validation and FileItem rows with progress, retry and remove.
Small squares that flicker toward a low ceiling, a few at a time, with an optional word glowing out of the grid. Canvas, repainting only the squares that change.
useFloating(): portal host, fixed positioning, flip and clamp for tooltips, popovers, menus and comboboxes.
Inline AI completion for an input or textarea: a faint suggestion after the caret, Tab to accept, Ctrl/Cmd+Right for one word, Esc to dismiss, a loading shimmer and a screen reader hint. Plain and monospace variants.
A lit floor that rises from the bottom edge: two soft gradient layers drift and breathe, and pulse(x) sends a wave across it from a ref or from other pieces (Prompt Keyboard sends one per key). CSS and the Web Animations API, no blur filter, no per-frame JavaScript.
Text filled with a slowly flowing gradient, with an optional matching gradient-border pill.
A crisp hairline grid with a few lit cells that trade places now and then. One SVG pattern on whole pixels, with dashes, tilt and a fade mask.
Landing page hero, centred: eyebrow chip, rotating headline word, two CTAs, an install command chip, optional facts row and a background slot. align="start" for a left-aligned version. Reduced motion keeps it still. Pro variants: hero-split, hero-product, hero-statement.
A preview card that opens when the pointer rests on a link or focus lands on it: open and close delays, the card stays open while you move into it, and on touch a first tap opens it and a second follows the link.
Shared helpers for illustrations: pause offscreen, in hidden tabs and under reduced motion.
Input with sizes, prefix/suffix, shortcut and password reveal; InputGroup; Textarea with counter and auto-grow; Field with label, hint, error, required and help.
Keyboard key.
cn() helper, Actor/Span/Task/Approval types, the event-fed run store (createAgentRun, useAgentRun) and shared state labels and colours.
Provider logos from a model name, brand logos or glyphs from a tool name, and actorIcon().
A grid of logos, grey until hover or focus, with light and dark variants and a wordmark fallback when there is no logo.
Pure helpers for Testimonials, FAQ Section, Newsletter, Contact Section and Team Grid: email and contact validation, FAQ filter, ids and hash links, carousel steps and the auto-advance gate, masonry columns, rating labels.
Shared pieces for the marketing sections: section heading, action buttons and arrow links, a fixed-aspect media frame (lazy image, dark variant, click-to-load video, live content), and pure helpers for tilt, marquee timing, bento spans and row sides.
Dropdown menu for a button: sections, checkable items, descriptions, icons, typeahead and arrow-key navigation.
The quiet action bar under an assistant message: Copy that turns into a check, Regenerate with a version switcher, thumbs up and down with a short reason picker, Read aloud with a live equalizer, and an overflow menu.
Model logos orbiting an agent hub, with the active model linked and a smooth hand-over between models.
Model logos and names drifting in a calm marquee, one or two rows.
Shared motion for state changes: duration and easing tokens, and helpers for a status icon that draws, shakes or pulses, a fold, rows that slide in and collapse out, a number that counts and a value that flashes. Reduced motion is instant.
Email sign-up as an inline band or a compact card: address check, busy state, returned or thrown errors, and a confirmation in the same space. A side offer, separate from the CTA section's capture.
Drifting nodes that link with hairlines when close; the pointer joins as a node. Canvas, drawn only while visible.
A bell with an unread count and a panel of notifications: tabs, day groups, read state, agent actions and an endless list; a sheet on phones.
Events by channel (email, push, in-app) with row and column toggles, required events, an email digest and quiet hours.
Digits that roll to the new value, for costs, tokens and live metrics.
First-run steps for a dashboard corner: progress, done, current and locked states, a call to action and an optional how-to on each step, snooze and dismiss, and a calm completion state.
One-time code in N slots: paste fills all, auto-advance and backspace, numeric or alphanumeric, masked, error state, onComplete.
Pages with ellipsis, previous/next, page size select and a compact variant.
A card that leans away from the pointer: the surface shifts a few px and grows to 102% while its content and an optional edge-bleeding media move further, for depth. Plain, muted or accent ground with optional grain. Transform-only with one rAF while hovered; still on touch and with reduced motion.