Application

Page Header

The page title block with one H1, a description, and actions.

StableUsed in Aback Tools, Aback LaunchRegistry JSON

Workspace

API keys

Create and revoke keys for the Aback API. Keys are shown once, so store them securely.

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add page-header

Writes components/ui/page-header.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { PageHeader } from "@/components/ui/page-header";

Props and composition points for Page Header. Native element props pass through.

Prop	Type	Default	Description
`title`	`ReactNode`	None	Rendered as the page's single h1. Required.
`description`	`ReactNode`	None	One or two sentences that state the outcome of the page.
`eyebrow`	`ReactNode`	None	Optional uppercase context label above the title.
`actions`	`ReactNode`	None	Primary and secondary actions for the page.
`as`	`"h1" \| "h2" \| "h3"`	"h1"	Heading element for the title. Use the default on a page, or h2 in a section or preview that already has a page heading.

Dependencies: no extra packages, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders one heading at the level you choose. A page should contain exactly one h1.
Breadcrumbs belong below the header, not inside it.
Actions are rendered in source order, which is also the keyboard order.
Keep the description factual and under roughly three lines at desktop width.

The Aback products whose interfaces shaped this component.