Segmented control
A pill of mutually-exclusive options — the mode-switcher pattern. The selected segment lifts onto the raised surface; options take an optional leading icon.
Badges
Badge is the larger pill chip for cards and tabs; StatusBadge is the tiny inline pill for row-level state (Public, Connected, Installed, …).
Status color recipes
The semantic status vocabulary — success, warning, info, and destructive (error). The tokens are mode-aware, so never pair them with dark: variants; raw palette classes (text-emerald-600, …) are banned by the local/no-raw-palette ESLint rule. Three recipes: plain text/icon, tinted chip, solid fill.
Tooltips
Radix tooltip with the app's delays and elevation; keyboardHint renders the shortcut chips inline. The first one is pinned open for reference — hover the second.
Popovers
The click-to-open anchored panel behind filters, pickers, and inline help. Modal on touch devices; dismisses on outside press or Esc.
Modals
Dialog is the general modal shell (scrolling body, built-in close button); AlertDialog is the confirm shape — its footer pairs an outline cancel with a primary action on the same bezel chassis.
Drawers
The vaul-powered sheet used as the mobile stand-in for popovers and dialogs; slides from a viewport edge with a drag handle on the bottom variant.
Indicators
Progress for determinate work; KeyHint renders keyboard shortcuts as key chips in the regular UI face (mono glyphs are hard to read).
Form fields
Input and Textarea share the inset-muted field look (border, inset shadow, ring on focus). Textarea auto-grows with its content inside a ScrollArea; both surface aria-invalid as a destructive ring.
Selects
The single-choice picker on the raised-surface trigger chassis. Pass `items` when labels differ from values — the closed trigger renders the label from that map.
Selection controls
Checkbox (default, lg, prominent), Switch (sm/md/lg), and RadioGroup share the inset-muted field look. Label is the form-field caption primitive; Separator divides the groups.
Sliders
The range slider used by the video player's volume control; thumbTooltipLabel shows a hover hint above the thumb.
Toggle groups
Single-select ToggleGroup — the connected-segments pattern (service create panel's HTTP/TCP/Process picker). The pressed item takes the accent paint.
Tabs
The muted-track tab strip — the active tab lifts onto the raised surface. Arrow keys move between tabs; panels swap below.
Tables
The data table used by billing, usage, and the SQLite viewer. Borders live on the cells (not rows) so they survive sticky headers; the container scrolls horizontally on overflow.
| Invoice | Date | Amount | Status |
|---|---|---|---|
| INV-0041 | Jun 01, 2026 | $20.00 | Paid |
| INV-0040 | May 01, 2026 | $20.00 | Paid |
| INV-0039 | Apr 01, 2026 | $18.50 | Refunded |
Collapsible
The disclosure primitive behind settings sections, thinking blocks, and tool-call groups in chat. The chevron rotates with the open state; the panel height animates via the global collapsible keyframes.
Retries: 3 · Timeout: 30s · Region: auto
These options only apply to scheduled runs.
Accordion
The headless single/multiple disclosure list (hand-rolled, not Base UI) — FAQ-style stacked items where opening one closes the rest in single mode.
Command
The cmdk-backed command palette list: fuzzy input, grouped items, empty state. CommandDialog wraps it in the kit Dialog for the ⌘K pattern.
Calendar
react-day-picker themed to the token system; nav chevrons and day cells reuse the flat-button variants. Single, range, and multi-select come from DayPicker's own mode prop.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
Resizable
react-resizable-panels wrappers: PanelGroup + Panel + Handle (withHandle shows the grip). Web's workspace split panes are built on these.
Hover cards
The rich-preview popover used for persona cards, usage summaries, and credit alerts. Opens on hover after a short delay; content portals above everything else.
Searchable list
SearchableListContainer pairs the app's SearchInput with a fixed-height ScrollArea viewport — the search/filter/scroll pattern used by pickers and settings lists. Esc clears; zero matches hand off to the shared EmptyState.
Empty states
Collection.EmptyState is the shared shape for the “no rows right now” slot. Three kinds: intro (first-run, invitational CTA), no-results (a filter matched nothing), and error (load failed, retry).
No chats yet
Start a conversation and it shows up here.
No matches
Nothing matches the current filter.
Couldn't load files
Something went wrong on our end.
Links
The docs prose link: foreground text with a muted underline that darkens on hover. Internal links route through next/link; external links open in a new tab and carry the ↗ mark.
Code block
The docs code block: card chrome, a horizontal ScrollArea, and a hover copy button. The fenced code arrives pre-highlighted by Shiki (in the docs via @shikijs/rehype at build time, here via codeToHast on the server).
Surfaces
RaisedSurface centralises the recurring raised-muted-tile look (inset highlight + soft drop shadow) used for icon tiles, badges, chips, and nav cards.
Skeleton
The pulsing placeholder block for loading states — size it with width/height utilities to match the content it stands in for.
Spinners & shimmer
CharSpinner cycles braille glyphs for loading states (the `z` variant is the app default); TextShimmer sweeps a highlight across streaming or pending labels.
Chips
BrandedChip is the inline link chip used in marketing prose — brand-tinted for Discord and GitHub, neutral otherwise.