Page Headers

6 variantsNewPro

Six inner-page headers — simple, with actions, with search, with tabs, with breadcrumbs and meta, and centred with an email field — each in a default or volt-tinted brand tone, with titles that rise word by word.

headerpage headertitlebreadcrumbstabssearchinner pageapp

Simple

Newsimple.tsx

Eyebrow, a title that rises word by word and a supporting line.

$npx shadcn@latest add @geturui-pro/page-headers-simple

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small label above the title.
`title`	`string`	—	Page h1; words rise in one by one.
`description`	`string`	—	Supporting line.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

With actions

Newwith-actions.tsx

Title block with inline stats on the left and actions on the right; actions go full width when stacked.

$npx shadcn@latest add @geturui-pro/page-headers-with-actions

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small label above the title.
`title`	`string`	—	Page h1; words rise in one by one.
`description`	`string`	—	Supporting line.
`stats`	`{ label; value }[]`	—	Inline figures under the description.
`actions`	`ReactNode`	—	Replaces the default buttons.
`primaryLabel / onPrimary`	`string / () => void`	—	Primary button.
`secondaryLabel / onSecondary`	`string / () => void`	—	Secondary button.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

With search

Newwith-search.tsx

A search field that widens on focus with a spring, popular-search chips and a result line that crossfades in.

$npx shadcn@latest add @geturui-pro/page-headers-with-search

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small label above the title.
`title`	`string`	—	Page h1; words rise in one by one.
`description`	`string`	—	Supporting line.
`query / defaultQuery / onQueryChange`	`string / string / (q) => void`	—	Search text.
`onSearch`	`(q: string) => void`	—	Enter or a chip.
`placeholder`	`string`	`"Search articles"`	Field placeholder and label.
`suggestions`	`string[]`	—	Popular-search chips.
`resultLabel`	`string`	—	Shown in place of the chips while a query is set.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

With tabs

Newwith-tabs.tsx

Title, actions and a row of section tabs with counts; the underline glides between tabs and the row scrolls on narrow screens.

$npx shadcn@latest add @geturui-pro/page-headers-with-tabs

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small label above the title.
`title`	`string`	—	Page h1; words rise in one by one.
`description`	`string`	—	Supporting line.
`tabs`	`{ value; label; count?; href? }[]`	—	Section tabs; href renders links.
`value / defaultValue`	`string`	—	Active tab id (controlled / uncontrolled).
`onValueChange`	`(id: string) => void`	—	Called when a tab is chosen.
`actions`	`ReactNode \| null`	—	Replaces the default buttons; null hides them.
`tabsLabel`	`string`	`"Team sections"`	Accessible name of the tab nav.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

Breadcrumbs and meta

Newbreadcrumbs.tsx

Detail-page header: a breadcrumb trail that becomes a back link when narrow, title with status and star, a meta row, people stack and actions.

$npx shadcn@latest add @geturui-pro/page-headers-breadcrumbs

Prop	Type	Default	Description
`crumbs`	`{ label; href? }[]`	—	Trail ending with the current page.
`title`	`string`	—	Page h1.
`status`	`{ label; tone: "success" \| "warning" \| "info" \| "danger" }`	—	Status pill with a dot and a word.
`meta`	`{ icon?; label }[]`	—	Facts under the title.
`people`	`string[]`	—	Collaborator names drawn as an initials stack.
`starred / defaultStarred / onStarredChange`	`boolean / boolean / (s) => void`	—	Star toggle.
`actions`	`ReactNode`	—	Replaces the default buttons.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

Centred

Newcentered.tsx

Centred eyebrow pill, title and subtitle with either buttons or an inline email field that confirms with a blur swap.

$npx shadcn@latest add @geturui-pro/page-headers-centered

Prop	Type	Default	Description
`eyebrow`	`string`	—	Small label above the title.
`title`	`string`	—	Page h1; words rise in one by one.
`description`	`string`	—	Supporting line.
`onSubscribe`	`(email: string) => void \| Promise<void>`	—	Shows the email field. Throw an Error to show its message.
`subscribeLabel / finePrint`	`string`	—	Button label and line under the field.
`actions`	`ReactNode`	—	Buttons shown when there is no email field.
`tone`	`"default" \| "brand"`	`"default"`	Brand tints the header volt with a faint grid and glow.
`className`	`string`	—	Classes for the outer element.

Install the whole set

Installs every page headers variant at once. Each section above has its own command for a single variant.

Pro installs use your private registry token. Add the @geturui-pro registry once — setup guide. The command works after you get Pro.

$npx shadcn@latest add @geturui-pro/page-headers

Also installs: Button

Accessibility

Each header is a header element with a single h1; tabs are a nav with aria-current, breadcrumbs an ordered list in a Breadcrumb nav.
The search form has role=search, a hidden label, Escape to clear and a live result line.
Rising titles render as plain text under reduced motion; the star toggle uses aria-pressed.

Feature Sections Hero Sections Navbar