PageHeader

The top of an app screen in one order.

checkout-api

Down

HTTPS check of api.acme.dev/health every 30 seconds from 6 regions.

View code

tsx

<PageHeader
	crumbsLabel="Breadcrumb"
	crumbs={[{ label: "Monitors", href: "/monitors" }, { label: "checkout-api" }]}
	title="checkout-api"
	status={<Badge color="danger" variant="secondary">Down</Badge>}
	description="HTTPS check of api.acme.dev/health every 30 seconds from 6 regions."
	overflow={<Button variant="ghost" color="neutral" aria-label="More actions">…</Button>}
	actions={<Button variant="outline" color="neutral">Pause</Button>}
	primaryAction={<Button>Edit monitor</Button>}
/>

Demo apps

Whole pages built only from @sdxc/ui, each for an invented product with its own palette and type. They open in a new tab.

Every demo, landings and docs sites alike, is listed in the demo gallery.

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Usage

typescript

import { PageHeader } from "@sdxc/ui/app";

Renders the header. From 40rem the actions end the title's row, the description under both; narrower, they sit beside the title when they fit and after the description otherwise. A sticky header spans the shell's gutter (--ui-app-gutter) so content never shows beside it.

Examples

With tabs and counts

Monitors

checkout-api

View code

tsx

<PageHeader
	crumbsLabel="Breadcrumb"
	crumbs={[{ label: "Monitors", href: "/monitors" }, { label: "checkout-api" }]}
	title="checkout-api"
	status={<Badge color="success" variant="secondary">Up</Badge>}
	primaryAction={<Button>Edit monitor</Button>}
	tabsLabel="Monitor views"
	tabs={[
		{ href: "/monitors/42", label: "Overview", current: true },
		{ href: "/monitors/42/incidents", label: "Incidents", count: 3 },
		{ href: "/monitors/42/checks", label: "Check log" },
		{ href: "/monitors/42/settings", label: "Settings" },
	]}
/>

Sticky, compacting once stuck

Incidents

Checkout API returning 502s

Monitoring

Opened 14:02 by checkout-api · 27 minutes

14:02 checkout-api failed its check from Frankfurt and São Paulo.

14:03 Paged the on-call engineer through the payments escalation policy.

14:05 Error rate on /charge reached 38%; the status page shows a partial outage.

14:11 Rolled back release 2026.11.1 of the checkout service.

14:14 Checks pass from every region; watching for 15 minutes before resolving.

14:29 Resolved. Root cause: a connection pool sized for the old database.

View code

tsx

<PageHeader
	sticky
	crumbsLabel="Breadcrumb"
	crumbs={[{ label: "Incidents", href: "/incidents" }, { label: "INC-218" }]}
	title="Checkout API returning 502s"
	status={<Badge color="warning" variant="secondary">Monitoring</Badge>}
	description="Opened 14:02 by checkout-api · 27 minutes"
	primaryAction={<Button>Resolve</Button>}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`title`	`RemixNode`	Yes
`crumbs`	`Crumb[]`	No	The trail from the app's root to this screen, shown from 40rem of header width.
`crumbsLabel`	`string`	No	The breadcrumb landmark's name, such as "Breadcrumb".
`parent`	`Parent`	No	The parent link shown under 40rem; defaults to the last linked crumb before this screen.
`description`	`RemixNode`	No	One line under the title.
`status`	`RemixNode`	No	A badge after the title, such as the record's status.
`primaryAction`	`RemixNode`	No	The one primary action, drawn after the secondary actions.
`actions`	`RemixNode`	No	Secondary actions, drawn first.
`overflow`	`RemixNode`	No	An overflow menu's trigger and menu, drawn last, so a destructive item in it comes last.
`tabs`	`Tab[]`	No
`tabsLabel`	`string`	No	The tabs landmark's name, such as "Monitor views".
`sticky`	`boolean`	No	Sticks the header at `--ui-app-sticky-top` and compacts it once stuck: the trail and the description fold away and the title shrinks. Reduced motion keeps it full size.

Also accepts everything in Omit<TagProps<"header">, "title" | "children">.