Inside the main column
PageHeader is not the app Navbar or Sidebar — it is the in-page h1 row at the top of children in App Shell. Previews use main-column padding (~80rem wide) or a full shell so width and spacing match production.
atelier — in App Shell (realistic context)
Sidebar + main — header at the top of the scrollable content column.
Overview
This is where users orient — below chrome, above the table.
Page body — tables, forms, and charts render below the header.
Default (description, actions)
Overview
In-page title row — below app chrome, above content.
Page body — tables, forms, and charts render below the header.
With breadcrumb (leading)
Overview
leading slot sits above the title — pair with Breadcrumb.
Page body — tables, forms, and charts render below the header.
Title + actions only
Overview
Page body — tables, forms, and charts render below the header.
Title only (bordered=false)
Trash
Page body — tables, forms, and charts render below the header.
Action group (Link + IconButton + Button)
API keys
Rotate keys regularly.
Page body — tables, forms, and charts render below the header.
size=sm / md / lg
size=sm
Security
Password and two-factor authentication.
size=md (default)
Overview
Standard list and settings pages.
size=lg
Analytics
Last 30 days across all projects.
align=center
Empty library
Create your first entry to get started.
bordered=false (stacked sections)
Inline section
No bottom rule — use inside cards or between blocks.
Nested block
With Subnav + CommandBar (full page top)
Settings
Header, then section tabs, then filters.
Page body — tables, forms, and charts render below the header.
Real Platform — compact title under floating navbar
RP uses the floating Navbar title for the page name; PageHeader is still useful for in-panel sections.
Contact details
Secondary section inside the contacts view.
Page body — tables, forms, and charts render below the header.
API
| Prop | Required | Type | Default | Description |
|---|---|---|---|---|
| theme | Optional | SiteTheme | atelier | Visual theme. |
| size | Optional | "sm" | "md" | "lg" | md | Title scale and bottom padding. |
| align | Optional | "start" | "center" | start | Copy and action alignment. |
| bordered | Optional | boolean | true | Bottom border under the row. |
| leading | Optional | ReactNode | — | Breadcrumb or back link above the title. |
| title | Optional | ReactNode | — | Page h1. |
| description | Optional | ReactNode | — | Supporting copy. |
| actions | Optional | ReactNode | — | Button, IconButton, Link CTAs. |