Page HeaderNew

The top of an admin page: breadcrumb, title, description, actions and tabs.

$ pnpm dlx shadcn@latest add @dashral/page-header

Invoices

Everything you've billed this year. Overdue invoices are reminded automatically.

Installation

$ pnpm dlx shadcn@latest add @dashral/page-header

Adds the component, the components it builds on, its npm packages and the theme tokens it uses. Or by its full URL: https://dashral.com/r/page-header.json

Usage

example.tsx

1import { Button } from "@/components/dashral/button"
2import { PageHeader } from "@/components/dashral/page-header"
3
4<PageHeader
5  breadcrumb={[{ label: "Billing", href: "/billing" }, { label: "Invoices" }]}
6  title="Invoices"
7  description="Everything you've billed this year."
8  actions={<Button>New invoice</Button>}
9/>

Using the npm package? Import from @dashral/ui/components/page-header instead, here and in the examples; the rest is the same.

Examples

A record's page

A back link, a badge beside the title, and a row of details.

Invoices

INV-1048

Overdue

Fernpay Due 3 days ago

With tabs

Tabs under it; divided runs the line under them.

Settings

Manage your workspace and how your team works in it.

API reference

PageHeader

Also takes every prop of <header>(opens in a new tab).

Prop	Type	Default
`title`	`ReactNode` The page's heading. Required.	—
`description`	`ReactNode` A line under the title.	—
`titleAs`	`"h1" \| "h2"` The heading's level.	`"h1"`
`breadcrumb`	`BreadcrumbItem[]` The trail above the title, drawn with Breadcrumb.	—
`back`	`{ href, label }` A link back above the title, instead of a breadcrumb.	—
`badge`	`ReactNode` Beside the title, e.g. a status.	—
`meta`	`ReactNode` A row of details under the title.	—
`actions`	`ReactNode` The page's buttons; on a phone they wrap under the title.	—
`tabs`	`ReactNode` Under everything, e.g. Tabs with variant="line".	—
`divided`	`boolean` A line under the header (under the tabs, with tabs).	`false`
`size`	`"sm" \| "default"` sm for a panel or a settings section.	`"default"`
`linkAs`	`ElementType` Your router's link, for the breadcrumb and the back link.	`"a"`
`classNames`	`{ title, description, meta, actions }` Classes for each part.	—
`className`	`string` Extra classes, merged with cn() so yours win.	—

Accessibility

A <header> with a real heading (h1 by default): keep one h1 per page.
The breadcrumb is a navigation landmark; the back link's arrow is decoration.