Components

A short, non-interactive status label such as Paid, Overdue or Draft. Not a button, not a counter.

Triggers an action. Not navigation; for links use asChild with an anchor.

Renders one icon from the curated set, bound to size and tone tokens. Not for logos or illustrations.

Single-line text entry: names, emails, references, amounts. Not for multi-line text, dates or selections.

Renders text in a named typographic role and tone. Every string on screen goes through it; nothing else sets font size or colour.

A bordered surface that groups related content: a KPI, a form section, a record summary. Not a page, not a modal.

Page-level tabs where each tab is its own URL. Not for switching panels in place; that is Tabs (not in the system yet).

The page's own header under the TopBar: title, description, meta, actions and section tabs. Not the global header; that is TopBar.

The product's primary navigation in the left column of AppShell. Not for sections within a page; that is TabNav.

The application's global header: brand, optional centre content and actions. Not a page title; that is PageHeader.

The application frame: skip link, sticky TopBar, full-height SideNav column and the main area. One per app, at the root layout.

Structure for an overview: a header, a row of three or four KPIs, then a wide and a narrow panel.

Structure for a list page: header with one primary action, a search and filter toolbar, and rows on a card.

Structure for a single record: status, actions and section tabs in the header, then main content and a summary column.

Structure for a settings or form page: a header, then card sections of labelled fields in one column.

Account settings for a billing product: business details, the payout account and notification recipients.

A billing overview: volume, revenue, outstanding and overdue KPIs, overdue invoices to chase and upcoming payouts.

An overdue invoice: status, reminder and download actions, line items with totals and a summary of what is owed.