Page header

Pro

The title area of an app screen: breadcrumb, title, description, a meta row for status and owners, actions on the right and optional tabs on the bottom border.

npx prodular-ui add page-header

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Record page

Breadcrumb, an identity mark, status, owners and renewal in the meta row, three actions and tabs.

"use client"
import { CalendarClockIcon, CreditCardIcon, MoreHorizontalIcon, PencilIcon } from "lucide-react"
import { Avatar, AvatarFallback, AvatarGroup } from "@/components/ui/avatar"import {  Breadcrumb,  BreadcrumbItem,  BreadcrumbLink,  BreadcrumbList,  BreadcrumbPage,  BreadcrumbSeparator,} from "@/components/ui/breadcrumb"import { Button } from "@/components/ui/button"import {  PageHeader,  PageHeaderActions,  PageHeaderBreadcrumb,  PageHeaderContent,  PageHeaderHeading,  PageHeaderMeta,  PageHeaderMetaItem,  PageHeaderRow,  PageHeaderTabs,  PageHeaderTitle,} from "@/components/ui/page-header"import { Status } from "@/components/ui/status"import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
export default function PageHeaderAccount() {  return (    <div className="w-full">      <PageHeader>        <PageHeaderBreadcrumb>          <Breadcrumb>            <BreadcrumbList>              <BreadcrumbItem>                <BreadcrumbLink href="#customers">Customers</BreadcrumbLink>              </BreadcrumbItem>              <BreadcrumbSeparator />              <BreadcrumbItem>                <BreadcrumbLink href="#enterprise">Enterprise</BreadcrumbLink>              </BreadcrumbItem>              <BreadcrumbSeparator />              <BreadcrumbItem>                <BreadcrumbPage>Northwind Logistics</BreadcrumbPage>              </BreadcrumbItem>            </BreadcrumbList>          </Breadcrumb>        </PageHeaderBreadcrumb>        <PageHeaderRow>          <PageHeaderContent>            <PageHeaderHeading>              <Avatar size="lg" className="rounded-lg after:rounded-lg">                <AvatarFallback className="rounded-lg bg-brand-subtle font-medium text-brand-subtle-foreground">                  NL                </AvatarFallback>              </Avatar>              <PageHeaderTitle>Northwind Logistics</PageHeaderTitle>              <Status variant="success" appearance="pill">                Active              </Status>            </PageHeaderHeading>            <PageHeaderMeta>              <PageHeaderMetaItem>                <AvatarGroup>                  <Avatar size="sm">                    <AvatarFallback>MO</AvatarFallback>                  </Avatar>                  <Avatar size="sm">                    <AvatarFallback>TL</AvatarFallback>                  </Avatar>                </AvatarGroup>                Maya Okafor and Theo Lindqvist              </PageHeaderMetaItem>              <PageHeaderMetaItem>                <CreditCardIcon />                Scale, 240 seats              </PageHeaderMetaItem>              <PageHeaderMetaItem>                <CalendarClockIcon />                Renews Mar 1, 2027              </PageHeaderMetaItem>            </PageHeaderMeta>          </PageHeaderContent>          <PageHeaderActions>            <Button variant="outline" size="icon" aria-label="More actions">              <MoreHorizontalIcon />            </Button>            <Button variant="outline">              <PencilIcon data-icon="inline-start" />              Edit account            </Button>            <Button>Create invoice</Button>          </PageHeaderActions>        </PageHeaderRow>        <PageHeaderTabs>          <Tabs defaultValue="overview">            <TabsList variant="line">              <TabsTrigger value="overview">Overview</TabsTrigger>              <TabsTrigger value="invoices">Invoices</TabsTrigger>              <TabsTrigger value="usage">Usage</TabsTrigger>              <TabsTrigger value="contacts">Contacts</TabsTrigger>              <TabsTrigger value="activity">Activity</TabsTrigger>            </TabsList>          </Tabs>        </PageHeaderTabs>      </PageHeader>    </div>  )}

List page

Title, description and actions with a bottom border.

import { DownloadIcon, PlusIcon } from "lucide-react"
import { Button } from "@/components/ui/button"import {  PageHeader,  PageHeaderActions,  PageHeaderContent,  PageHeaderDescription,  PageHeaderRow,  PageHeaderTitle,} from "@/components/ui/page-header"
export default function PageHeaderSimple() {  return (    <div className="w-full">      <PageHeader bordered>        <PageHeaderRow>          <PageHeaderContent>            <PageHeaderTitle>Invoices</PageHeaderTitle>            <PageHeaderDescription>              Every invoice issued from Ledgerline, including drafts and voided invoices. Amounts are shown in USD.            </PageHeaderDescription>          </PageHeaderContent>          <PageHeaderActions>            <Button variant="outline">              <DownloadIcon data-icon="inline-start" />              Export CSV            </Button>            <Button>              <PlusIcon data-icon="inline-start" />              New invoice            </Button>          </PageHeaderActions>        </PageHeaderRow>      </PageHeader>    </div>  )}

Anatomy

<PageHeader>  <PageHeaderBreadcrumb>{breadcrumb}</PageHeaderBreadcrumb>  <PageHeaderRow>    <PageHeaderContent>      <PageHeaderTitle>Northwind Logistics</PageHeaderTitle>      <PageHeaderMeta>        <PageHeaderMetaItem><CreditCardIcon />Scale plan</PageHeaderMetaItem>      </PageHeaderMeta>    </PageHeaderContent>    <PageHeaderActions>      <Button variant="outline">Edit</Button>      <Button>Create invoice</Button>    </PageHeaderActions>  </PageHeaderRow>  <PageHeaderTabs>{tabs}</PageHeaderTabs></PageHeader>

Guidance

Use it when

The top of every app screen, so titles, actions and tabs sit in the same place everywhere.
The meta row for two to four facts people look for first on a record: status, owner, plan, dates.

Avoid

More than one primary action. Move the rest to outline buttons or a More menu.
A description longer than two lines. Link to docs instead.
Putting the page header inside a Card.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Render exactly one PageHeaderTitle per screen. It is the h1.
Put actions in PageHeaderActions with the primary button last. Icon-only buttons need aria-label.
Use PageHeaderTabs with a Tabs list set to variant="line" for sub-navigation of the record. Do not also pass bordered.
Use PageHeaderMetaItem for each fact, with a lucide icon or Avatar first and plain text after. Use Status for state, never a colored text span.
Use bordered on list pages without tabs so the header separates from the content below.

API

PageHeader

Prop	Type	Default	Description
bordered	boolean	false	Bottom border and padding. Leave off when using PageHeaderTabs.

PageHeaderBreadcrumb

Prop	Type	Default	Description
children	Breadcrumb		Sits above the title.

PageHeaderHeading

Prop	Type	Default	Description
children	ReactNode		Title with an optional avatar, logo or Status on the same line.

PageHeaderMeta

Prop	Type	Default	Description
children	PageHeaderMetaItem[]		A wrapping row of 13px facts.

PageHeaderActions

Prop	Type	Default	Description
children	Button[]		Right-aligned on wide screens, below the title on small ones.

PageHeaderTabs

Prop	Type	Default	Description
children	Tabs		Line tabs whose underline sits on the header border.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add page-header# or, with the registry in components.jsonnpx shadcn@latest add @prodular/page-header