Page Header

Layout

A title block with optional breadcrumb and actions.

PageHeader standardizes the top of a page: a breadcrumb above, a bold title with a muted description, and actions aligned to the right.

npx shadcn@latest add page-header

Default

Preview

Live

Docs / Layout

Page header

A consistent heading block for every page in the docs.

tsx

1<PageHeader
2  breadcrumb={<span className="text-sm text-muted-foreground">Docs / Layout</span>}
3  title="Page header"
4  description="A consistent heading block for every page."
5  actions={<Button size="sm">New page</Button>}
6/>

API reference

All props of the underlying Base UI primitive are forwarded. The table below documents the Shelf-specific props.

Prop	Type	Description
title	React.ReactNode	The page title.
description	React.ReactNode	A short line under the title.
breadcrumb	React.ReactNode	Content rendered above the title.
actions	React.ReactNode	Buttons or actions aligned to the right.