Page Header · paneui

Installation

pnpm dlx shadcn@latest add @paneui/page-header

Usage

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

<PageHeader>
  <PageHeaderContent>
    <PageHeaderTitle>Customers</PageHeaderTitle>
    <PageHeaderDescription>Everyone with an active workspace.</PageHeaderDescription>
  </PageHeaderContent>
  <PageHeaderActions>
    <Button size="sm">Add customer</Button>
  </PageHeaderActions>
</PageHeader>

Composition

PageHeader
├── PageHeaderContent
│   ├── PageHeaderEyebrow
│   ├── PageHeaderTitle
│   └── PageHeaderDescription
└── PageHeaderActions

Examples

Basic

Reading Page

Layout

Actions wrap under the title on narrow screens. The title is the page's h1.

API Reference

PageHeader

Also accepts every prop of header.

size= "default": "default" | "lg"; lg sets a text-3xl title and text-lg lede, aligns actions with the title, and gives a direct eyebrow or description its own row.

Prop	Type	Default	Description
size	"default" \| "lg"	"default"	`lg` sets a `text-3xl` title and `text-lg` lede, aligns actions with the title, and gives a direct eyebrow or description its own row.

PageHeaderTitle

text-2xl semibold, balanced wrapping. Also accepts every prop of h1.

PageHeaderEyebrow

Small line above the title, such as a breadcrumb or status. Also accepts every prop of div.