The UI kit for AI products: live agent views, chat, app screens and marketing blocks for React, installed as source you own.
A stack of collapsible sections. One open, or several, with a full keyboard path.
A timeline of what people and agents did: unread dots and Mark all read, type tabs with counts, expandable rows, day groups and a live N new update pill.
Agents editing a document like multiplayer teammates: coloured live pointers with name, action and spend, suggestions typed in as tracked changes with accept, reject and Accept all, image resize, code edits, margin comments with a typing indicator, and a Table tab.
Many agents at a glance: a row (or card) per main agent with model, task, state, spend and clock, totals on top, and a sub-agent tree that unfolds under it with approve and retry right in it.
Live graph of agents and the tools they call: tree, horizontal and center layouts, light streaks per call, detail popover.
A relay of agents: who handed what to whom, with the context passed along, lost items, a light along the rail on each new hand-off, and forward reassignment by drag or keyboard.
Where every agent is right now: a lane per agent, tasks growing into now, hand-offs and approvals on the block.
One agent at work as a card: current step with a clock and cost, a time strip, finished steps with tool logos, the exact command when it needs your OK, and a folded bar.
The steps an agent intends to take, checked off live: step states, sub-steps, elapsed times, a progress bar, animated plan changes, Approve plan / Edit plan and a one-line collapsed view. Reads the run store or plain props.
Streamed answer with steps, sources, numbered citations that preview their source, copy, regenerate, feedback and follow-ups.
An inline callout with info, success, warning and error tones, an optional title, one action and a dismiss button.
Dismissible announcement bar above the header: a link or CTA, an optional countdown, tone variants, dismissal remembered per id in localStorage, and a smooth height collapse with no layout jump.
API keys with live or test environments, idle detection, inline create that shows the secret once, expandable details and hold to revoke.
A signed-in dashboard on the App Shell: sidebar with workspaces, topbar with search and notifications, page header, stat band, a fleet of agents that need you, recent activity and a usage card. Demo data, replace it with yours.
Requests waiting for a human decision with a preview and Approve / Deny.
The frame of a signed-in app: a sidebar with a workspace switcher, nav, pinned groups and a footer slot that folds to an icon rail (Cmd or Ctrl+B), and a sticky topbar with breadcrumb, search, notifications and the account menu. A modal sheet on mobile.
Up to three soft colour fields drifting slowly behind your content. Transform-only CSS, no blur filter.
Sign in or sign up by email code, magic link or both, with OAuth buttons (GitHub, Google, Microsoft, Apple or your own), resend and rate-limit countdowns. Callbacks only, any auth backend.
The page around the auth card: centered, or split with a brand panel that takes any background.
Image, logo or initials with status dot, badge and verified mark; AvatarGroup with +N and invite; AvatarLabel with name and supporting text.
Shared shell and helpers for the backgrounds: fade masks, theme-token colours, density and speed, seeded layouts, and the motion gate.
Status labels in six tones: sizes, pill shape, icons, clickable and removable badges, and BadgeGroup with +N overflow.
Current plan with status and renewal, usage meters, payment method, invoices, and cancel or resume with confirmation.
A blog index: a featured post and a grid of cards with cover, tags, title, excerpt, author, date and reading time, tag filter chips, Load more or pages, and an empty state.
A blog post page: header, article typography, a sticky table of contents that follows the reader, a reading-progress bar, Copy link and share, previous / next and related posts.
Path of links that collapses middle items into an overflow menu.
Primary, secondary, ghost and destructive buttons with icons, three sizes and a loading state that stays focusable.
Bordered surface with header, content and footer parts.
A catalogue page: category tabs with counts over a grid of thumbnail cards with New and Pro badges, plus a Sketch kit for quiet monochrome thumbnails in one visual language.
Dated version entries tagged New / Improved / Fixed / Breaking with rich content, media and links, a tag filter, an RSS link, and a compact What's new list with unread dots.
Line, bar (grouped or stacked), area and sparkline in plain SVG with no dependency: axes, grid, keyboard tooltip, legend toggles, empty state and a screen-reader data table.
Agent input: autosizing text, attachments, model and permission-mode menus, connected apps, working folder, dictation, send and stop.
Native checkbox with label, description, indeterminate state and sizes; CheckboxGroup with select-all.
Code with syntax colours, a copy button, filename and language label, line numbers, highlighted lines, a wrap toggle and long-output collapse. No highlighter dependency, and a slot for Shiki.
Select with icons, avatars, status dots, supporting text, groups, search, multiple choice and a tags mode. Opens as a popover, a dialog, or a bottom sheet on phones.
⌘K palette: fuzzy search with highlights, groups, shortcuts, nested pages, recents and async results - all by keyboard.
Contact methods beside a form with name, email, topic and message: labelled fields, errors that clear as they are fixed, focus on the first problem, a callback, and a same-height thank-you panel.
Shared pieces for the content blocks: article typography and content blocks (headings, lists, quotes, code, callouts, images, tables), covers, author chips, and helpers for reading time, table of contents, reading progress, filters, highlighted matches and a small search.
How full a model context is and what fills it: segmented token bar or cell field, thresholds in words, per-part files you can remove, compact action, ring variant and per-turn sparkline.
A chat history list: a search box, pinned chats, groups by day, inline rename and a row menu for pin, rename and delete. Arrow keys move between rows; F2 renames, Delete asks to delete.
A consent banner with Accept all, Reject all and Customize, and a preferences dialog with categories (necessary locked on). Saves the choice, calls back, never blocks the page, and rejecting is as easy as accepting.
Closing call to action: headline, lead, one or two buttons or an email capture with validation, busy, error and thank-you states, on a plain, accent or inverted panel or over a background. Centred or split layout.
A field of small shaded cubes that rise and settle under the pointer, with a slow idle wave, flat isometric or tilted in perspective with glowing crests. Canvas, redrawn only while cubes move.
Draws the pointer inside an area as an arrow with a name pill, a dot that grows into a label over data-cursor-label targets, or a crosshair with coordinates. It follows with a light spring. It stays off on touch and coarse pointers and under reduced motion, and keeps the native cursor over inputs and data-cursor="native"|"hidden".
A real <table> with multi-sort, filters and search, range selection, column visibility, density, pagination or virtualised rows.
One date, optionally with a time: a typeable field that reads ISO, locale-ordered numbers, month names, today/tomorrow, 'next fri', 'in 3 days' and '3pm', with a live preview and a calendar popover; or a button or an inline panel. Quick picks, min/max, disabled days, Intl only.
Range or single date in a popover: one or two month calendar, presets, keyboard grid navigation, min/max and disabled days, Field label/hint/error. Intl only, no date library.
Text that resolves out of noise into its final value, without layout shift.