Page Header

A compound component for page title, description, and actions.

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.

Demo Function

Serverless functions that run at the edge with low latency and automatic scaling.

import { Database } from 'lucide-react'
import { Button, Card } from 'ui'
import {
  PageHeader,
  PageHeaderAside,
  PageHeaderDescription,
  PageHeaderIcon,
  PageHeaderMeta,
  PageHeaderSummary,
  PageHeaderTitle,
} from 'ui-patterns/PageHeader'
 
export function PageHeaderDemo() {
  return (
    <div className="w-full">
      <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>Demo Function</PageHeaderTitle>
            <PageHeaderDescription>
              Serverless functions that run at the edge with low latency and automatic scaling.
            </PageHeaderDescription>
          </PageHeaderSummary>
          <PageHeaderAside>
            <Button type="default" size="small">
              Secondary
            </Button>
            <Button type="primary" size="small">
              Deploy Function
            </Button>
          </PageHeaderAside>
        </PageHeaderMeta>
      </PageHeader>
    </div>
  )
}

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

<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 type="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.

PreviousPage Nav

NextPage Section