PageHeader
Top of an in-page area: Title, Description, plus Breadcrumbs / Actions / Status slots
SSR mode
Examples
Title + description
Settings
Manage your project configuration.
With actions
Sites
All sites in this project.
With status badge
Production
Healthy
Live environment.
Borderless, gutters off
Compact
No bottom border, tight vertical rhythm.
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| PageHeader | Top of an in-page area: page title, description, plus optional breadcrumbs above and actions/status next to the title. Renders with a 1px bottom border so the header visually divides from the page body. Wrapper-styling. |
PageHeader
Top of an in-page area: page title, description, plus optional breadcrumbs above and actions/status next to the title. Renders with a 1px bottom border so the header visually divides from the page body. Wrapper-styling.
| Property | Type | Required | Description |
|---|---|---|---|
| Title | string | Page title. Rendered as <h1> in text-2xl font-bold. | |
| Description | string? | Sub-title text. Rendered in text-muted-foreground below the title. | |
| Breadcrumbs | RenderFragment? | Slot rendered above the title row. Typically a BreadcrumbBar chunk. | |
| Actions | RenderFragment? | Right-aligned action slot. Typically one or two Buttons. | |
| Status | RenderFragment? | Inline slot rendered next to the title. Typically a Badge showing environment / health / state. | |
| Borders | bool | Toggles border-b border-border. Default: true. | |
| Gutters | bool | Toggles pb-6 outer / gap-4 title row / gap-2 actions row. Default: true. | |
| HeaderAlignment | Alignment | Flex items-* on the title row. Default: Alignment.Start (multi-line title+description top-aligns with side-actions). |