Page-level chrome: breadcrumbs, title, subtitle, and primary CTA. Every primary surface in admin + sys starts with this pattern for a consistent left-aligned rhythm.

Example

2026 season

Registration opens 1 March · 14 sanctioned tournaments.

Usage

tsx · DashboardPage.tsx

<PageHeader
  breadcrumbs={[
    { label: 'Federations', href: '/federations' },
    { label: 'Sverige', href: '/federations/sv' },
    { label: '2026 season' },
  ]}
  title="2026 season"
  subtitle="Registration opens 1 March · 14 sanctioned tournaments."
  action={<Button>Create tournament</Button>}
/>

Used in: admin, sys, app