Segmented control
Mutually exclusive options with a flat selected fill and border. Options can include a 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, …).
Persona avatars
One avatar path for uploaded images, the built-in Zo Pegasus, and custom-persona initials. Image failures fall back without shifting the surrounding row.
Uploaded imageActivity time
One live timestamp policy for activity surfaces: seconds, minutes, hours, and days ago, then abbreviated month and day after a week.
Date and time
One formatter for absolute moments: the reader's locale, an explicit zone with its label, and a date-only style. DateTime shows the relative label and opens the absolute value on hover, keyboard focus, and tap. This demo pins the locale to en-US so the server and browser agree.
- zone: "UTC"
- Oct 6, 2026, 1:50 PM UTC
- zone: "UTC", style: "date"
- Oct 6, 2026 UTC
- locale: "de-DE"
- 6. Okt. 2026, 13:50 UTC
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 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 use one flat field boundary and a visible focus ring. Textarea grows with its content inside a ScrollArea; invalid fields show a destructive border.
Code editor
A line-numbered textarea over a Shiki-highlighted mirror. Tab and Shift+Tab indent and outdent; Enter keeps the line's indentation; Escape, then Tab, leaves the field. `readOnly` shows the same view without editing; `wrap` soft-wraps prose.
Selects
A single-choice picker with a flat trigger. Pass `items` when labels differ from values; the closed trigger renders the mapped label.
Comboboxes
A single-choice picker you can type in. Use it for people and resources. A short fixed set stays a select.
Selection controls
Checkbox, Switch, and RadioGroup use flat surfaces with explicit checked states. Label identifies each field; 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
A flat tab strip with a tinted active tab and fine border. 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
Base UI disclosures with unique accessible labels and standard keyboard behavior. Opening one closes the rest unless multiple panels are enabled.
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: Group + Panel + Separator (withHandle shows the grip). Web's workspace split panes are built on these.
File tree
The @pierre/trees shell behind web's Host Files tree and the workspace Knowledge tree: FileTreeView takes a loading, error or ready state and builds a deterministic model from the ready nodes through createTreeInput. Deep-import only; fileTreeThemeStyle maps Pierre's --trees-theme-* variables onto kit's --card, --foreground, --accent, --border, --ring and --input tokens, so the tree follows the app theme and dark mode with no extra CSS.
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).
Unified diff
Markdown
The read-only Markdown viewer: GFM in the typeset styles, with a leading YAML front matter block shown as fields above the body and Mermaid fences drawn as diagrams. Raw HTML and images never render, and links open in a new tab.
- title
Launch plan
- status
draft
- tags
research, decisions
Launch plan
Your agent keeps this plan current as decisions land. See the guide.
| Step | Owner |
|---|---|
| Research | Zo |
| Decide | You |
zo deploy --stage preview
graph LR Research --> Decide --> Ship
Surfaces
RaisedSurface is reserved for content cards and callouts. Buttons, selectors, icon tiles, and tabs use flat treatments.
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.