Page header
The top of every page: one h1, with an optional breadcrumb, a meta line, a lede and the page's actions. Reach for it once per page.
bunx --bun shadcn@4.17.0 add @waimakers/page-header- Kit dependencies
- utilsthemebreadcrumbskeleton
- npm dependencies
- None
From the registry
The page's one h1 with an optional breadcrumb, meta line, lede and actions. Actions sit beside the title from sm up and wrap under it below; the lede is visually hidden on a phone and stays readable to assistive technology. A page header inside the dashboard shell replaces the shell's default.
Examples
With everything
Breadcrumb, title, meta, lede and actions. The title is the page's h1 in real use. Actions sit beside the title from sm up and drop below it on a phone.
Meeting notes
Joins every team meeting, writes the notes and files the follow-ups in the right project.
Title only
A plain page needs only the title.
Skills
Long title
Long titles balance across lines and break long words instead of pushing the actions off screen.
Quarterly planning review with the delivery, design and operations teams
Loading
SkeletonPageHeader holds the header's shape while data loads, with or without the breadcrumb line.