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.
All Projects
Manage and monitor your active projects.
Account Settings
Update your preferences and profile details.
align="start" (default)
Documents
Browse and manage your files.
align="center"
Get Started
Follow these steps to set up your workspace.
Project Alpha
Manage tasks, milestones, and collaborators for this project.
Page body content would follow here…
Dashboard
Analytics
Track engagement metrics and audience trends over time.
Welcome back
Verify your email
We sent a 6-digit code to the address on file. Check your inbox to continue.
Reports
View summaries and export your data.
Team Members
Manage roles and access for your organization.
Integrations
Connect your tools and external services.
API Keys
Manage credentials for programmatic access.
Billing
Review your current plan and payment methods.
Webhooks
Receive real-time event notifications from your account.
Installation
npx shadcn@latest add @byronwade/page-headerProps
| 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. |