Page Header

A page heading with breadcrumb, title, description, and actions.

Page Header

Compose a title and description.

Installation

Add the page header component with the shadcn CLI.

bash

npx shadcn@latest add https://swiss.ui.unsanity.ai/r/page-header.json

Usage

tsx

import { PageHeader } from "@/components/ui/page-header"

Examples

With actions

Trailing action slot

Settings

Manage your workspace.

import { Button } from "@/components/ui/button"
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderHeading,
  PageHeaderTitle,
} from "@/components/ui/page-header"

<PageHeader>
  <PageHeaderHeading>
    <PageHeaderContent>
      <PageHeaderTitle>Settings</PageHeaderTitle>
      <PageHeaderDescription>Manage your workspace.</PageHeaderDescription>
    </PageHeaderContent>
    <PageHeaderActions>
      <Button>Save</Button>
    </PageHeaderActions>
  </PageHeaderHeading>
</PageHeader>

With breadcrumb

Compose any nav above the heading

Page Header

Breadcrumb composed by the consumer.

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
import {
  PageHeader,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderHeading,
  PageHeaderTitle,
} from "@/components/ui/page-header"

<PageHeader>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Docs</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Page Header</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
  <PageHeaderHeading>
    <PageHeaderContent>
      <PageHeaderTitle>Page Header</PageHeaderTitle>
      <PageHeaderDescription>Breadcrumb composed by the consumer.</PageHeaderDescription>
    </PageHeaderContent>
  </PageHeaderHeading>
</PageHeader>