A page's h1 with a back link, a meta line, a description and actions.
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.
Installation
npx shadcn@latest add KezLahd/rime/page-headerAlso installs: base, icon.
Usage
import { PageHeader } from "@/components/shell/PageHeader";
<PageHeader title="Atlas redesign" back={{ href: "/projects", label: "Projects" }} actions={<Button variant="secondary">Share</Button>} />Examples
Back link, meta and actions
API
Generated from the component's TypeScript types and JSDoc (scripts/gen-ui-registry.mjs), so it always matches the source.
PageHeader
| Prop | Type | Default | Description |
|---|---|---|---|
| titleRequired | 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 |
Theme tokens
Per-component tokens are undeclared by default, so the default shown is the fallback the CSS uses. Set one at :root (or in theme.css) to restyle every instance. Live values are read from this page, so they follow the Rime Studio.
This component has no tokens of its own; it reads the system tokens below.
System tokens it reads
| Token | Default | Live value |
|---|---|---|
| --brand-deep | tokens.css | … |
| --dur | tokens.css | … |
| --ease | tokens.css | … |
| --focus-ring | tokens.css | … |
| --font-display | tokens.css | … |
| --ink-brand | tokens.css | … |
| --ink-heading | tokens.css | … |
| --ink-secondary | tokens.css | … |
| --r-xs | tokens.css | … |
| --text-body | tokens.css | … |
| --text-caption | tokens.css | … |
| --text-page-title | tokens.css | … |
| --tracking-display | tokens.css | … |
| --wash-subtle | tokens.css | … |
Accessibility
- Renders the page's only h1.
Do and don't
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.
For AI agents
This page as markdown, rendered from the same registry entry. Point an agent at it (or add .md to this page's URL), or at /llms.txt for the index.
Open page-header.md