Bar
A structural bar — flex row with the standard slot gap and panel background.
Bar props
| Prop | Type | Default | Description |
|---|---|---|---|
| as | "header" | "footer" | "nav" | "div" | — | Semantic element (default div). |
| height | "sm" | "md" | "lg" | — | Height token (default md). |
Grid
Column placement that adapts — fixed columns or auto-fit by minimum child width.
Grid props
| Prop | Type | Default | Description |
|---|---|---|---|
| cols | number | auto | 2 | Column count. |
| gap | GridGap | md | Gap tier. |
| minChildWidth | string | — | Auto-fit minimum width. |
Page header
The top of a page — eyebrow, title, description, actions — on the section surface band.
PageHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Page title (h1, page-title role). |
| description | ReactNode | — | Intro paragraph under the title. |
| eyebrow | ReactNode | — | Small label above the title. |
| breadcrumbs | BreadcrumbItem[] | — | Trail rendered above the title. |
| actions | ReactNode | — | Right-aligned action slot. |
Safe area
Platform insets per side — one component instead of hand-rolled calc in every app.
SafeArea props
| Prop | Type | Default | Description |
|---|---|---|---|
| sides | Array<"top" | "bottom" | "left" | "right"> | — | Sides to inset (default all four). |
| children | ReactNode | — | Content. |
Section header
One section's intent — a title, a supporting line, and the section's actions.
SectionHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | — | Section title (h2, section-title role). |
| description | string | — | Supporting sentence under the title. |
| actions | ReactNode | — | Right-aligned slot on the heading row. |
Split view
Two regions, one ratio — the primary column holds the work.
SplitView props
| Prop | Type | Default | Description |
|---|---|---|---|
| orientation | horizontal | vertical | horizontal | Split orientation. |
| primarySize | number | 0.5 | Primary column ratio. |