Page headers

The top of a page: title and supporting text, a trail that becomes a Back button, actions, search, and an optional banner the avatar sinks into.

Specimen

Guidelines

Code

Contextual demo

This page has no in-column demo on purpose: a page header wants the whole viewport. The preview carries the full control set instead.

View in a page

Why the demo lives in the preview

The component’s whole job is a wrap row across a page, and two of its parts only exist below 768px — the Back control is md:hidden against the browser window, and the search swaps to its 40px, 16px-text form via useBreakpoint("md"). A demo well in this docs column can show neither honestly, so the controls moved to the preview: the six styles ride its example select (URL-synced, so a style deep-links), and the title, supporting text, trail, actions, search, and divider live in its control bar’s panel. Resizing the preview window is the component’s real breakpoint behavior.

The family

Two exports from one module: the stateless PageHeader surface and the live PageHeaderSearch field.

The components in this family, with their descriptions and import paths
Component	Description	Import from
PageHeader	The whole surface: title over supporting text, a breadcrumbs slot that gives way to a Back button below md, an actions slot, a search slot, an optional avatar, an optional banner the avatar sinks into, and the bottom rule. Stateless — every part is a prop, and the mobile Back renders only when it is wired.	`@/components/application/page-header/page-header`
PageHeaderSearch	The sheet’s search field, live: the kit Input with the search icon, sm with the ⌘K shortcut chip from md up and md with 16px text below it — the sheet’s own iOS-zoom annotation made real. Named “Search” by default so it is never an unlabelled control.	`@/components/application/page-header/page-header`

Built from

Seven layers make up the family; five have their own docs page.

Component	Where it’s used here
Button	The mobile Back control: link-gray at size sm with the arrow forced to 16px. The action buttons are the caller’s own — the sheet draws two secondary and one primary sm.
Avatar	The plain styles’ 56px identity: size xl with border, statusless, beside the title at 12px.
@untitledui/icons	ArrowLeft on the Back control and SearchLg in the search field; the fixture trail’s Home01 is the caller’s.

The six styles

One component, three props. banner decides the shell, avatar decides the identity, centered decides the axis — the sheet’s six styles are the reachable combinations.

Team members

Manage your team members and their account permissions here.

The three actions, the search field, and the mobile Back are wired — activate one.

Simple — the default: trail, text, actions, and search in one wrap row over the rule. This one’s slots are wired; the line below reports what you activate.

Olivia Rhye

olivia@untitledui.com

Avatar — the 56px bordered avatar leads the title; the text block gives up its 320px floor for a 12px gap beside it

The trail is a slot, and the Back control is a prop

Read from the source: the component draws no crumbs of its own — the breadcrumbs slot expects the breadcrumbs family’s type="button", and these specimens pass five crumbs whose middle two collapse into the ellipsis the sheet draws. Below md the slot never renders; the Back button takes its place, and only when onBack or backHref is supplied — a named, focusable control that does nothing is a defect, not a placeholder (CL-K4).

Team members

Manage your team members and their account permissions here.

Banner simple — the artwork full-bleed with a 4px inset, the content in the component’s own 1280px container, the trail 24px under the banner

Olivia Rhye

olivia@untitledui.com

Banner avatar — the 160px verified profile photo sinks 40px into the banner; the content column starts 64px down, landing the trail on the same 24px line

Olivia Rhye

olivia@untitledui.com

Banner simple centered — trail, text, actions, and search all center; the text block caps at 640px

Olivia Rhye

olivia@untitledui.com

Banner avatar centered — the photo centers on the banner (64px deep) while the trail pins back to the start edge

The banner is a box the artwork fills

Read from the source: the component owns the banner’s size — 160px below md, 240 from it, radius 12, a 4px inset, clipped — and the banner node just fills it. These specimens pass the sheet’s own placeholder, a literal #a5c0ee → #fbc5ec gradient; a real page passes an img with size-full object-cover and empty alt, because the artwork is decoration — anything it says is invisible to assistive tech and doomed on contrast.