Command Menu

Search documentation, components, and switch theme.

Fragments

Page Header

Compound page header with icon, title, description, breadcrumbs, and actions.

Formance
Docs

Installation#

npx shadcn@latest add @formance/page-header

Install the following dependencies:

npm install class-variance-authority

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import {
  PageHeader,
  PageHeaderMeta,
  PageHeaderIcon,
  PageHeaderSummary,
  PageHeaderEyebrow,
  PageHeaderTitle,
  PageHeaderDescription,
  PageHeaderAside,
  PageHeaderBreadcrumb,
} from '@/components/ui/page-header'
<PageHeader size="default" background border>
  <PageHeaderMeta>
    <PageHeaderSummary>
      <PageHeaderEyebrow>Module</PageHeaderEyebrow>
      <PageHeaderTitle>Ledger</PageHeaderTitle>
      <PageHeaderDescription>
        Manage ledgers, transactions, and accounts.
      </PageHeaderDescription>
    </PageHeaderSummary>
    <PageHeaderAside>
      <Button>Manage module</Button>
    </PageHeaderAside>
  </PageHeaderMeta>
</PageHeader>

Examples#

Sizes#

The size prop drives the inner container max-width (small 768 / default 1200 / large 1600 / full none) and adjusts vertical padding (full uses py-4, the others py-8).

Compound Components

Compose the pieces you need:

<PageHeader />Root container. Accepts size, background, and border variants.
<PageHeaderMeta />Wraps icon, summary, and aside in a responsive row.
<PageHeaderIcon />Slot for a custom icon or SVG.
<PageHeaderSummary />Groups eyebrow, title, and description.
<PageHeaderEyebrow />Small label above the title. Defaults to gold variant.
<PageHeaderTitle />Primary heading (h1).
<PageHeaderDescription />Supporting text below the title.
<PageHeaderAside />Container for action buttons, aligned to the right.
<PageHeaderBreadcrumb />Breadcrumb navigation wrapper.