Components

Convenience composition: Provider → Root(form) → title/description → Fields → Error → Submit.

Date range picker (Popover + Calendar in range mode).

A hierarchical list with expand and collapse, single or multiple selection and full keyboard navigation.

TanStack-backed data grid with sorting, filtering, pagination and a render-prop toolbar.

The spreadsheet-grade preset of DataTable (interaction="grid"): one tab stop, arrow keys across header and body cells, Excel-style cell ranges (drag, Shift, Ctrl/⌘), Ctrl/⌘+A, and Ctrl/⌘+C copies what the cells display as tab-separated text.

A DataGrid from one serialisable spec — rows, optional column specs (inferred when absent) and an optional saved view.

Categorical comparison — composed from Bar + BarXAxis/BarYAxis inside its provider.

Trend over a continuous (usually time) axis.

Computed reference lines and bands: analytics={[{ kind: "line", value: "mean" }]} on any cartesian container, ScatterChart (both axes) and DistributionChart.

The standard chat input — a PromptInput pre-assembled with attachments, tools and submit.

The SAFE generative-UI path: renders an agent-DESIGNED screen from data — a JSON tree of catalog types validated against the catalog — with the real components; actions reach the host's onAction.

A model-emitted, column-oriented data table rendered as message content.

How to write your own node type on the branded canvas.

layoutFlowElk lays a graph out with ELK’s layered algorithm — same result shape as layoutFlow, plus the engine that answered.

A branded process-map edge whose stroke width scales with a weight value (frequency or volume) relative to the other edges sharing its scaleGroup, and can optionally colour the stroke by a second continuous value between --flow-edge-weak and --flow-edge-strong; a “back” variant renders dashed and routed clear of the forward edge it doubles back over.

Root MapLibre canvas — theme-aware basemap; the ref is the raw MapLibre Map. With plan it is a non-geographic plan instead (a floor, a plant, a carriage) and every layer inside speaks plan units.

Clusters dense point data into count bubbles that split apart as you zoom in.

A GeoJSON line layer for routes/paths.

A markdown editing workspace: the editor with its outline, preview and toolbar arranged as one document surface.

Multi-file editor shell.

The Monaco side-by-side diff surface — the only diff in the library that can be typed into.

Render a file the app did not write (upload, signed URL, agent output) — detects the format, loads the matching adapter on demand, draws it with brand-ui components.

Attachments, uploads, side-by-side revisions and a custom format

Render a file the app did not write (upload, signed URL, agent output) — detects the format, loads the matching adapter on demand, draws it with brand-ui components.

The console ground for the agent-session family: the terminal surface, the mono type role and the two-column gutter grid, established once and published to every row inside.

Streaming terminal surface for agent shell output, with an optional input line.

A single tool invocation dressed as a CLI line: a status glyph (success/error/pending), the tool name plus its optional argument in parentheses, a result summary on a ⎿ row, and detail behind a real disclosure.

Directly-follows process map: activities as nodes, transitions as edges, both painted from one metric choice, with an accessible table twin.

The ranked list of activity sequences in an event log.

ProM’s performance spectrum (§4 R15): one row per segment, one line per case from the moment it left from (row top) to the moment it reached to (row bottom), on a shared time axis.

Muted row of customer/partner logos.

Grid of capability cards below the hero.

A marketing band listing the quality gates a release passes, each with its status.

The product-vocabulary icon set: brand and domain glyphs built on the shared icon primitive.

The brand/product-vocabulary icon primitive — 24×24, stroke = currentColor, so it themes with text.

The standard app/brand mark for app chrome — theme-aware, morphs mark↔lockup on sidebar collapse.

How data-theme + semantic tokens give one component set any number of looks — the two reference themes (light, dark), a theme you author yourself, plus the orthogonal decoration / density / motion dials.

Each swatch is theme-reactive: it fills from var(--token), so switching the toolbar theme recolors the entire page.

The stacked elevation ramp (shadow-2xs → shadow-2xl) and its hairline-ring variant (shadow-ring-*) for floating surfaces, plus shadow-hairline for a bare 1px edge.