Layout & structure
The pieces that frame a page — a page masthead, the centered column and stacking primitives, an action toolbar, mono section labels, the application shell, and the composable footer.
Footer
A footer assembled from parts, never a fixed layout. The root owns only the surface — a top border, a flat or frosted ground, and a capped inner column — so each app's tokens supply the brand and its own children supply the content. Pair with useScrollDock (@shuttering/motion) for the parallax drawer.
| Prop | Type | Default | Description |
|---|---|---|---|
| Footer · frosted | boolean | false | Translucent glass over a backdrop blur instead of a flat card ground. |
| Footer · size | ContainerSize | 'xl' | Max width of the inner content column. |
| FooterBrand · wordmark | ReactNode | — | The display wordmark; children become the muted blurb. |
| FooterColumns · cols | 2 | 3 | 4 | 4 | Responsive column count. |
| FooterColumn · title (required) | ReactNode | — | The column heading; renders as a titled nav landmark. |
PageHeader
A page masthead: an optional mono kicker, a serif title, a muted description, and a right-aligned actions slot.
Invoices
Every charge, with its public source.
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | ReactNode | — | The page heading. |
| kicker | ReactNode | — | A mono eyebrow above the title. |
| description | ReactNode | — | A muted supporting line. |
| actions | ReactNode | — | Right-aligned page actions. |
Container, Stack, Row & Center
The spacing primitives. Container centers a max-width column; Stack (vertical) and Row (horizontal) are token-gapped flex; Center absolutely fills a relative parent to hold a loading, empty, or error message.
| Prop | Type | Default | Description |
|---|---|---|---|
| Container · size | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Max width; the gutters stay fixed. |
| Stack / Row · gap | 0 | 1 | 2 | 3 | 4 | 6 | 8 | — | Token gap between children (Stack columns, Row centers a row). |
| Center | div | — | Absolute-fill flex center — put it in a relative parent. |
Toolbar
A horizontally-scrollable band of actions with token-colored separators — filters and controls above a view.
Section labels
Kicker and SectionLabel — the mono, uppercase eyebrows that title a block without spending a full heading. SectionLabel takes a leading icon.
AppShell
A framework-agnostic application scaffold — a sticky, blurred header (brand, nav, actions) over a full-width or sidebar body, with the sidebar collapse as local state. It fills the viewport, so it's best seen inside a real app; its props are below.
| Prop | Type | Default | Description |
|---|---|---|---|
| brand (required) | ReactNode | — | The product mark, pinned to the header left. |
| nav | ReactNode | — | Center header slot for rendered navigation links. |
| actions | ReactNode | — | Right header slot (search, theme toggle, user menu). |
| sidebar | ReactNode | — | When given, a collapsible left column renders beside main. |