Components

Primary, tertiary, secondary, destructive, and quiet actions with pending spinner.

Labeled text input with description and validation error slots.

Search input with icon and clear button.

Labeled multiline input with description and validation error slots.

A rich text field whose value is Markdown, with a toolbar for bold, italic, headings, lists and links. Reach for it over TextArea when the person is writing prose that gets rendered later, and keep TextArea when the raw Markdown is the point.

TextArea whose trigger character opens a filtered suggestion list; picking one writes the mention at the caret. Reach for it over TextArea when the prose has to name records the app knows about (people, companies, saved assets) and you need the pick as data, not just the typed string.

Numeric input with increment and decrement steppers.

Single checkbox with indeterminate state; CheckboxGroup for labeled sets.

Labeled group of checkboxes with shared description and validation.

Single-choice group, vertical or horizontal.

On/off toggle with label, description, and validation slots.

Single or range slider with live output value.

Picker over a dropdown listbox; SelectItem and SelectSection for options.

Autocomplete input over a filtered listbox.

Stacked form wrapper wiring React Aria validation.

Segmented date input; TimeField for times.

Segmented time input on the DateField chassis.

Month grid with keyboard navigation; RangeCalendar for spans.

Two-ended month grid selecting a contiguous span.

Date field with a calendar popover.

Start and end date fields with a range calendar popover.

Generic surface: Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter.

Static status pill with semantic color variants.

Inline callout with icon slot, title, and description; status variants.

Pulsing placeholder for a layout whose shape you already know, so nothing jumps when the data lands. SkeletonLine, SkeletonCircle and SkeletonText compose it; SkeletonCardList, SkeletonTable, SkeletonRows, SkeletonToolbar and SkeletonPanel are the whole shapes. Wrap a region in SkeletonBlock so it announces itself once instead of not at all. Stops animating under reduce-motion.

The wait for something whose shape you do not know yet, like a submit or a panel fetching. Prefer Skeleton when the layout is known, and Shimmer for a model working in a transcript. Same arc as Loader and Button's pending state.

Keyboard key cap; KbdGroup for chords.

Locks a child to a ratio; images and videos cover the box.

Media / content / actions row primitive for lists and settings.

Attaches adjacent buttons into one segmented control.

Pressable on/off button; ToggleButtonGroup for single or multiple selection.

Groups ToggleButtons with shared selection.

Determinate or indeterminate progress with label and value.

Gauge that shifts success → warning → destructive as it fills.

Sonner underneath, our markup on top: it owns the stack, the timers and the announcements; we own every pixel. Mount ToastRegion once at the app root and call toast() from anywhere. A plain card with the tone carried by its icon: default, success, destructive, warning, info, and loading, which spins and should usually be given no timeout. A thin line shows the time left and pauses on hover; older toasts wait behind, and one that leaves dissolves.

Side panel over a scrim; Drawer is the bottom placement.

Blocking confirm dialog with cancel and confirm actions.

Sortable, selectable, resizable data grid: Table, TableHeader, Column, TableBody, Row, Cell.

Page controls with sibling window and gaps.

React Aria breadcrumb trail; the layout Breadcrumbs stays the data-driven server-safe one.

One number, named: label, auto-compacted value, optional delta and hint. The right form when a measure has no shape worth drawing.

Copies a value to the clipboard and says Copied for two seconds. Text or icon only; onBlocked fires when the browser refuses, so the caller can say what to do instead.

Collapsible app rail: provider, header, groups, menu buttons with injected links, nested sub-menus that fly out once collapsed, badges, off-canvas below the mobile breakpoint, trigger, inset.

A list you reorder by dragging the whole row, no handle. Rows spring into place; Alt plus the arrow keys moves the focused row.

A select that reads as plain text until hovered: the value at the end of a settings row, like Always show in the sidebar editor.

Linear-style sidebar editor: a settings card, then sections of rows that each pick Always show, Show when it has items or Don't show, reordered by dragging the row.

The app's stable frame: brand, destinations with a shared active pill, search, and the account, the same on every page. `inset` sits over the page beside a sidebar card; `full` spans the window with the sidebar below it. Sets --topbar-row-h, --tabstrip-h and their sum as CSS variables, so a second row costs no measurement and no re-render.

The orange count pill beside a section title or a nav tab. Caps at 99+.

A muted square that holds a row's icon, at 32px or 40px.

A small single choice switch in a muted well, the selected option lifted onto a card. For views and sort orders inside a page, not for navigation.

The v2 top bar's centered destinations: links in a muted well, the current one lifted onto a card pill that slides between items, with an optional count. Labels can hide on narrow screens and fall back to a tooltip.

The simple shell's fixed column: 40px glyph items on the chrome ground with a shared active pill, a tooltip to the right and a hidden text label. An item with an href is a link; one with onPress is a button, so it can trigger the launcher or the account menu.

The apps popover body: grouped destinations three to a row with a divider between groups and an All apps footer row. LauncherPopover wraps it in the Popover and Dialog for a DialogTrigger on the rail.

The one-line breadcrumb above a Brain or Settings page, built on the Kobra breadcrumb parts: parent links, chevron separators and the current page as plain text. Truncates instead of wrapping so it fits beside the sidebar toggle.

Browser-style tabs for the top bar's second row. Each tab is a remembered location rather than a document; a pinned tab shrinks to its glyph and shows no close control, and middle-click closes.

The rail's other half: a sticky bar across the content column carrying where you are on the left, and on the right the tools that are the same on every page: search, icon actions with badges, then the account. Pairs with SidebarInset; it does not span the rail.

Page or inline failure surface: title, detail, error message and digest, retry and home actions.

One full-bleed line about the whole session, not the page: impersonation, an unreachable backend, a job still running. Alert is the in-page box; this is the strip under the top bar. Dismissible only if you pass onDismiss.

Loading, empty, error or the thing itself, decided once from a Query status. A failure always outranks emptiness, so a list never claims to be empty when the request actually failed. Wraps children in an ErrorBoundary.

Catches render errors below it and shows ErrorState with a reset; resetKeys clear it.

The 404 preset of ErrorState, muted tone.

The offline preset of ErrorState; useOnline() reports connectivity.

Embla-powered slides with previous/next controls and arrow-key navigation.

Recharts inside a tokenized container: chart-1…5 colors, tooltip and legend in contract tokens.

A DatePicker over a plain YYYY-MM-DD string, so a form field and the server agree without a date library at the edge.

A DatePicker with hour and minute segments over a plain YYYY-MM-DDTHH:mm string, for a moment something happens, like when a post goes live.

TanStack Table over the React Aria Table: column defs, sorting, optional pagination.

A windowed grid with a sticky first column, hidden row selection, mobile long press and drag select, and per column footer summaries.

Virtualized table over an infinite query: server-driven sort, scroll-to-load-more, disclosure rows, loading/empty/error states.

Column-header filter popover for text, facets, numbers, and dates. The host owns the applied value; the button shows whether the column is filtered.

A number that tweens to its new value when it changes, or with roll turns each digit like an odometer; still under reduced motion.

One-time-code input with slots, groups, and separators.

Country picker plus a tel input that formats as you type and reports the number as E.164.

Draggable panel groups with an optional grip handle.

Right-click menu anchored at the pointer; a Menu in a Popover, so keyboard users get it via the item's own actions.

Toolbar of menu triggers with arrow-key movement between menus.

Site nav with plain links and popover panels; panel links carry a title and description.

Rich hover/focus card on a popover, so it stays while the pointer moves onto it and its links can be clicked.

A brain object inline in prose: a quiet type icon, the name, and a hover card that opens the object page. What every /graph/object link becomes in MarkdownDoc and the rich editor.

Tab list with panels.

Tags with semantic colors, selection, and removal.

Dropdown menu with sections, submenus, and shortcuts.

Centered modal over a blurred scrim.

A dialog title with theme-defined typography and heading semantics.

Anchored floating panel.

Hover and focus tooltip.

Expandable section; DisclosureGroup for accordions.

Selectable list with sections; DropdownItem for menus and selects.

Where you are in a short unnamed flow: one dot per step, the current one slides. Use FlowProgress when the steps have names worth reading.

The bar the host renders above each v2 setup step: one segment per step with the current one wider, the step count, and Back where the host passes it.

The lines a Markdown rewrite changed, unified or split, folded past 16 lines behind Show all. Import it from @youspot/ui/components/markdown-diff.

A brand kit's eight colors, two typefaces, radius and logo painted from the kit as runtime data; sm for list rows, md for the full strip.

Controlled form over a BrandKit: hex fields with a native color picker and contrast hints, font selects, a radius slider, logo uploads, and the review alert with Approve for an extracted kit.

An explicit 3-credit website pull with a separate candidate preview, evidence, conflict confirmation, Apply to draft and Discard.