Skip to content
38

Page Headers.

The top of an app page: breadcrumbs, title and status, actions, tabs, a filter toolbar or a metric strip, sitting above the content they control.

4 blocks, live at full size, install from here

01 / 04Collapsing breadcrumb, status badge, copy link, archive and restore

Page Header 01

Detail page header with a breadcrumb that collapses on small screens, a status badge, owner and contributor meta, and Share, Edit and overflow actions. Share copies the link, Edit renames in place, Archive locks the page until restored and Delete can be undone. Ships composable parts.

npx shadcn@latest add https://hirael.com/r/page-header-01.json

02 / 04Line tabs, URL hash sync, live member count

Page Header 02

Workspace header with a primary action and line tabs for Overview, Members, Billing and Settings, kept in sync with the URL hash. Inviting someone updates the member count and the billing total, and renaming the workspace updates the title. Ships composable parts.

npx shadcn@latest add https://hirael.com/r/page-header-02.json

03 / 04Search, status filter, sort, list or grid

Page Header 03

Invoice list header with a live count, a New invoice dialog and a toolbar for search, status filter, sort and list or grid layout. Shows an empty result with Clear filters when nothing matches. Ships composable parts.

npx shadcn@latest add https://hirael.com/r/page-header-03.json

04 / 04Date range, CSV export, metric strip, sparklines

Page Header 04

Analytics header with a 7, 30 or 90 day range and CSV export, above a strip of four metrics with animated values, sparklines and change chips colored by whether the change is good or bad. Ships composable parts.

npx shadcn@latest add https://hirael.com/r/page-header-04.json