Page header
Titles a page with its icon, actions, meta text and key details. For a record or a list, start from Record header or List view header.
Report: Opportunities
Pipeline by Stage
Installation
The CLI installs the Radix or Base UI file to match your project.
If your project doesn't have Wisty UI's theme yet, add it once with npx shadcn@latest add @wisty/cosmos. Until then, components keep shadcn's default look. Installation has the details.
When to use
Use it
- At the top of a page, to name it: a report, a dashboard, a setup page, a record or a list.
- When the page's actions belong beside its name, like Edit, Subscribe or New.
- When a few key details belong under the name, like a record's highlights.
- In place of Lightning's page header,
lightning-cardused as a page title, or a hand-built title bar.
Don't use it
- For a record's page: start from Record header, which formats its highlight fields and collapses its actions into a menu.
- For a list's page: start from List view header, which adds the list switcher, the meta line and the list's controls.
- For a section inside a page. Use Card with a
CardTitle.
Usage
PageHeader
├── PageHeaderRow
│ ├── PageHeaderFigure
│ ├── PageHeaderHeading
│ │ ├── PageHeaderEyebrow
│ │ └── PageHeaderTitle
│ └── PageHeaderActions
├── PageHeaderRow
│ ├── PageHeaderMeta
│ └── PageHeaderActions
└── PageHeaderDetails
└── PageHeaderDetail
├── PageHeaderDetailLabel
└── PageHeaderDetailValueimport { Icon } from "@/components/wisty/icon"
import {
PageHeader,
PageHeaderEyebrow,
PageHeaderFigure,
PageHeaderHeading,
PageHeaderRow,
PageHeaderTitle,
} from "@/components/wisty/page-header"<PageHeader>
<PageHeaderRow>
<PageHeaderFigure>
<Icon name="standard:dashboard" />
</PageHeaderFigure>
<PageHeaderHeading>
<PageHeaderEyebrow>Dashboard</PageHeaderEyebrow>
<PageHeaderTitle>Sales Leaderboard</PageHeaderTitle>
</PageHeaderHeading>
</PageHeaderRow>
</PageHeader>A title that opens a switcher holds the trigger inside PageHeaderTitle, so the heading keeps its name. Up to two controls that act on the title, like a pin, go in PageHeaderHeading after PageHeaderTitle, at the end of the title's line. Pass joined on PageHeader when a table sits directly below it: the header draws no frame of its own, and a wrapper around both draws one with the header's tokens, as List view header's first example does.
Examples
With key details
An account's page with four fields in `PageHeaderDetails` below the title, the phone and website as links.
Account
Burlington Textiles Corp of America
- Type
- Customer - Direct
- Phone
- (336) 222-7000
- Website
- www.burlington.example
- Account Owner
- Ellen Hart
List view
An accounts list: the title opens a searchable list of list views, a pin follows it, and a second `PageHeaderRow` holds the meta text and controls.
Accounts
50+ items • Sorted by Account Name • Updated a few seconds ago
Dashboard
A dashboard's page, with when its data was read and whose view it shows as `PageHeaderMeta` in a row of its own.
Dashboard
Sales Leaderboard
As of Oct 12, 2026, 9:42 AM • Viewing as Ellen Hart
Setup page
Object Manager's header: a menu button among the actions, and a Quick Find search beside the meta text.
Setup
Object Manager
52 Items, Sorted by Label
API reference
| Part | Built on |
|---|---|
PageHeader | <div> (opens in a new tab) |
PageHeaderRow | <div> (opens in a new tab) |
PageHeaderFigure | <div> (opens in a new tab) |
PageHeaderHeading | <div> (opens in a new tab) |
PageHeaderEyebrow | <p> (opens in a new tab) |
PageHeaderTitle | <h1> (opens in a new tab) |
PageHeaderActions | <div> (opens in a new tab) |
PageHeaderMeta | <p> (opens in a new tab) |
PageHeaderDetails | <dl> (opens in a new tab) |
PageHeaderDetail | <div> (opens in a new tab) |
PageHeaderDetailLabel | <dt> (opens in a new tab) |
PageHeaderDetailValue | <dd> (opens in a new tab) |
PageHeader
| Prop | Type | Default | Description |
|---|---|---|---|
joined | boolean | false | Draws no frame of its own, so the header and the list below it share one from the page. |
SLDS mapping
The parts follow slds-page-header: each row is slds-page-header__row, the figure holds slds-page-header__icon, the heading is slds-page-header__name with slds-page-header__title as the h1, the actions are slds-page-header__controls, the meta text is slds-page-header__meta-text, and the details are slds-page-header__detail-row with a slds-page-header__detail-block per detail. The table lists every part.
Known gaps:
- SLDS puts the object's name inside the h1. Here the eyebrow is a paragraph before it, so the heading is the page's name alone.
- The vertical header (
slds-page-header_vertical) isn't a variant. On a narrow page the details go two to a row, as its detail list does, and the rows wrap. - SLDS's detail row never wraps. Here it wraps when the details don't fit in one line.
| Prop | Value | SLDS | Notes |
|---|---|---|---|
PageHeader joined | true, false (default) (added) | slds-page-header_joined | Draws no border, radius or shadow, so the header and the table below share one frame from the page. |
PageHeaderRow | (part) (added) | slds-page-header__row | Rows sit flush. A row wraps its items when they don't fit; SLDS's rows don't. |
PageHeaderFigure | (part) (added) | slds-media__figure, slds-page-header__icon | Holds the page's 2rem icon, 12px from the title. |
PageHeaderHeading | (part) (added) | slds-page-header__name | The eyebrow over the title, with room after the title for a switcher. |
PageHeaderEyebrow | (part) (added) | slds-page-header__name-title h1 > span | The object's name above the title. A p before the heading, not inside it. |
PageHeaderTitle | (part) (added) | slds-page-header__title slds-truncate | The h1. 28px regular in Cosmos, 18px bold in Lightning Blue. One line, truncated. |
PageHeaderActions | (part) (added) | slds-page-header__controls, slds-page-header__control | Buttons 8px apart: the page's actions in the first row, a list's controls in the second. |
PageHeaderMeta | (part) (added) | slds-page-header__meta-text | 13px muted text. |
PageHeaderDetails | (part) (added) | slds-page-header__detail-row | A dl that bleeds to the header's edges. Gray in Cosmos, white in Lightning Blue. Wraps, two to a row when narrow. |
PageHeaderDetail | (part) (added) | slds-page-header__detail-block | 64px apart, at most a quarter of the row. |
PageHeaderDetailLabel, PageHeaderDetailValue | (part) (added) | slds-text-title, slds-truncate | A dt in 12px muted text over a dd in 13px, each truncated. |
Accessibility
PageHeaderTitleis the page's h1, so use one page header per page, at the top of its main content.- Give every icon-only button an
aria-label, and give a button group one that names whose actions they are ("Report actions"). - A truncated title or detail value shows its full text only to people who can hover. Pass the full text as
titletoo.
Responsive behavior
- A row wraps its items when they don't fit: the actions move under the title, and the controls under the meta text.
- The title stays on one line and truncates before the actions wrap, once it's narrower than 12rem.
- The details sit in one row, each at most a quarter of it, and wrap when they don't fit. On a narrow page they go two to a row.
- The header is as wide as its parent gives it. In a flex row, give it
w-fullorflex-1.
Rules
- Keep the title to one line. Put anything that describes it in
PageHeaderEyebrowabove, or inPageHeaderMetaor the details below. - Render the details as label and value pairs. A value that's missing shows an empty
PageHeaderDetailValue, not a dash or "None". - Put links in detail values for web addresses, email addresses and phone numbers, with
className="text-link hover:underline". - Never pass
asChildorrender.