# PageHeader

> A page's h1 with a back link, a meta line, a description and actions.

Category: Shell. Docs page: https://rime.mjsons.net/components/page-header

## Installation

```bash
npx shadcn@latest add KezLahd/rime/page-header
```

PageHeader opens every signed-in page: the h1, an optional back link above it, meta beside the title (a status pill, a reference) and actions on the right. Nothing is stacked over the title, and the description uses the full width of its column.

## Usage

```tsx
import { PageHeader } from "@/components/shell/PageHeader";

<PageHeader title="Atlas redesign" back={{ href: "/projects", label: "Projects" }} actions={<Button variant="secondary">Share</Button>} />
```

## Props: PageHeader

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `actions` | `ReactNode` |  | Right-aligned: the view's one primary button, plus any secondaries. |
| `back` | `{ href: string; label: string }` |  | Back link above the title, e.g. { href: "/projects", label: "Projects" }. |
| `meta` | `ReactNode` |  | Sits beside the title: a status pill, a reference. |
| `className` | `string` |  |  |

## Examples

### Back link, meta and actions

```tsx
<PageHeader
  title="Atlas redesign"
  description="Started 12 Oct 2026 · 4 members"
  back={{ href: "/projects", label: "Projects" }}
  meta={<StatusPill tone="success">Active</StatusPill>}
  actions={<Button variant="secondary">Share</Button>}
/>
```

## Theme tokens

System tokens it reads: `--brand-deep`, `--dur`, `--ease`, `--focus-ring`, `--font-display`, `--ink-brand`, `--ink-heading`, `--ink-secondary`, `--r-xs`, `--text-body`, `--text-caption`, `--text-page-title`, `--tracking-display`, `--wash-subtle`.

## Accessibility

- Renders the page's only h1.

## Do

- One PageHeader per page.

## Don't

- Don't repeat the top bar title as a second heading.
- Don't stack a small label over the title.