Page Header - Supabase

Compound header for page context: optional icon, title, description, and aside actions. Breadcrumbs and sub navigation use Page Breadcrumbs and Page Nav as siblings above this component — see Layout patterns.

Quick reference

Piece	Role
`PageHeaderMeta`	Wrapper for icon, summary, and aside — use when the page needs a title block
`PageHeaderIcon`	Optional icon to the left of the summary
`PageHeaderSummary`	Groups `PageHeaderTitle` and `PageHeaderDescription`
`PageHeaderTitle`	Page heading (`h1`)
`PageHeaderDescription`	Supporting text below the title
`PageHeaderAside`	Page-level actions when there is no filter row above a table

Sizes: small, default, large, full — passed to PageHeader and applied to the meta container width.

Example

tsx

<PageHeader size="default">
  <PageHeaderMeta>
    <PageHeaderIcon>
      <Card className="flex h-14 w-14 shrink-0 items-center justify-center">
        <Database className="h-5 w-5" />
      </Card>
    </PageHeaderIcon>
    <PageHeaderSummary>
      <PageHeaderTitle>Templates</PageHeaderTitle>
      <PageHeaderDescription>Manage email templates for your project.</PageHeaderDescription>
    </PageHeaderSummary>
    <PageHeaderAside>
      <Button variant="primary" size="tiny">
        Create template
      </Button>
    </PageHeaderAside>
  </PageHeaderMeta>
</PageHeader>

Sub-components

PageHeader — root; size variants: small, default, large, full
PageHeaderMeta — groups icon, summary, and aside
PageHeaderIcon — optional icon (inside PageHeaderMeta)
PageHeaderSummary — title and description (inside PageHeaderMeta)
PageHeaderTitle — page heading (h1)
PageHeaderDescription — supporting text
PageHeaderAside — actions when meta is shown

Legacy sub-components PageHeaderBreadcrumb and PageHeaderNavigationTabs remain for existing pages; prefer Page Breadcrumbs and Page Nav for new work.