Patterns · Application UI
Page Header
A dashboard page heading that renders a title, optional subtitle, and optional action slot in either a left-aligned (start) or centered layout.
Feature showcase
Installation
Features
6 examples
Default, Align, Breadcrumb Context, Description Only, With Actions, With Badge.
API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The main heading text rendered as an h1. |
| description | string | - | Optional muted subtitle rendered below the title. |
| children | React.ReactNode | - | Optional action elements (e.g. buttons) placed to the right of the heading (start) or below it (center). |
| align | "start" | "center" | "start" | Controls layout alignment: start puts actions on the right; center stacks everything and centers it. |
| className | string | - | Additional Tailwind classes merged onto the root wrapper element. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/page-header.tsx |
| Default example | content/examples/page-header/default.tsx |
| Align example | content/examples/page-header/align.tsx |
| Breadcrumb Context example | content/examples/page-header/breadcrumb-context.tsx |
| Description Only example | content/examples/page-header/description-only.tsx |
| With Actions example | content/examples/page-header/with-actions.tsx |
| With Badge example | content/examples/page-header/with-badge.tsx |