# Page Headers

> 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.

- Collection: Blocks
- Tier: pro
- Docs: https://geturui.com/docs/page-headers
- Install: `npx shadcn@latest add @geturui-pro/page-headers`
- Dependencies: motion, lucide-react

## Variants

### Simple

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

Install: `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

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

Install: `npx shadcn@latest add @geturui-pro/page-headers-with-actions`

```tsx
import { PageHeaderActions } from "@/components/blocks/page-headers/with-actions";

<PageHeaderActions title="Projects" onPrimary={() => setCreating(true)} onSecondary={exportCsv} />
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/page-headers-with-search`

```tsx
import { PageHeaderSearch } from "@/components/blocks/page-headers/with-search";

<PageHeaderSearch query={q} onQueryChange={setQ} resultLabel={`${results.length} articles`} />
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/page-headers-with-tabs`

```tsx
import { PageHeaderTabs } from "@/components/blocks/page-headers/with-tabs";

<PageHeaderTabs title="Team" value={tab} onValueChange={setTab} tabs={[{ value: "members", label: "Members", count: 18 }]} />
```

| 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

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.

Install: `npx shadcn@latest add @geturui-pro/page-headers-breadcrumbs`

```tsx
import { PageHeaderBreadcrumbs } from "@/components/blocks/page-headers/breadcrumbs";

<PageHeaderBreadcrumbs
  crumbs={[{ label: "Projects", href: "/projects" }, { label: project.name }]}
  title={project.name}
  status={{ label: "At risk", tone: "warning" }}
/>
```

| 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

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

Install: `npx shadcn@latest add @geturui-pro/page-headers-centered`

```tsx
import { PageHeaderCentered } from "@/components/blocks/page-headers/centered";

<PageHeaderCentered title="The journal" onSubscribe={(email) => subscribe(email)} tone="brand" />
```

| 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. |

## 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.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.