Page Header

The PageHeader component presents page titles, metadata, actions, and supporting content in a consistent header.

Usage & Examples

Settings Header

Workspace

Billing settings

Manage seats, invoices, and payment methods.

settings-header.tsx

<PageHeader
  eyebrow="Workspace"
  title="Billing settings"
  subtitle="Manage seats, invoices, and payment methods."
  actions={<Button size="small">Add seat</Button>}
/>

Props API

Page Header props API
				Default	Description
`actions`	`ReactNode`	No	props	`—`	Primary action area rendered at the end of the header.
`actionsClassName`	`string`	No	props	`—`	Additional class name for the actions area.
`as`	`"div" \| "header" \| "section"`	No	props	`"header"`	Semantic element used for the root.
`before`	`ReactNode`	No	props	`—`	Optional content rendered before the title block.
`children`	`ReactNode`	No	props	`—`	Additional header content.
`className`	`string`	No	styling	`—`	Additional class name for the root.
`compact`	`boolean`	No	props	`false`	Whether title/actions should stack more tightly.
`contentClassName`	`string`	No	props	`—`	Additional class name for the content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Whether the header is visually disabled.
`eyebrow`	`ReactNode`	No	props	`—`	Small text rendered above the title.
`footer`	`ReactNode`	No	props	`—`	Optional content rendered after the main row.