Page header
A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
pnpm dlx shadcn@latest add @uiarc/page-headerCheckout redesign
On trackRebuilding mobile checkout around saved payment methods and a single review step, then rolling it out in stages from October 14.
Milestones
- Saved payment methodsShipped Sep 18
- Single review stepIn progress, due Oct 1
- Staged rolloutPlanned for Oct 14
Recent activity
Ava Mitchell moved CHK-131 to review
1h agoMarcus Johnson merged the saved cards endpoint
3h agoEmma Collins shared Checkout flows v3
YesterdaySofia Ramirez closed CHK-119, a double charge on retry
Yesterday
Jasmine Brooks set the rollout date to October 14
Sep 17
- The top of a project, repository, or record page with breadcrumbs, status, people, and tabs.
- Detail pages with long content where the header should fold into a compact bar as people scroll.
- Headers that need a few primary actions plus an overflow menu for the rest.
- Use tabs and breadcrumb on their own when the page only needs navigation, not status and people.
- Use workspace-sidebar for app-level navigation between sections.
- Use settings-page for settings screens that need a section nav rather than a record header.
Installation
Add Page header with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/page-headerAdds the block and its local dependencies, and installs motion, lucide-react, @radix-ui/react-tabs, @radix-ui/react-dropdown-menu. First time? Add the @uiarc registry to components.json, or use the full URL:
Usage
Use this at the top of a project, repository, or record page. Connect breadcrumbs to your router, tab counts and status to your data, and Follow, Share update, New issue, and Archive to your API; every action in the preview is simulated.
import { PageHeader } from "@/registry/blocks/page-header/page-header"; export default function ProjectPage() { return ( <main> <PageHeader /> </main> );}PageHeader
A self-contained project header with breadcrumbs, status, members, progress, tabs and an actions menu that condenses into a compact bar on scroll. The project, people, tabs and counts are sample data declared at the top of page-header.tsx.
No props.
- Arrow keys
- Move between tabs (Radix tabs) and through the actions menu, which loops.
- EnterorSpace
- Activates the focused tab or menu item.
- Tabs use Radix roles (tab, tabpanel) and the current breadcrumb carries aria-current.
- The icon-only actions trigger has aria-label="More actions"; disabled items use aria-disabled.
- A polite role="status" region announces results of Follow, Share, Copy link and Archive.
- Past a short scroll threshold the header folds into a compact bar; the tab indicator glides with a shared layoutId and counts roll with Animated counter.
- Reduced motion swaps springs for fades, uses instant scroll instead of smooth, and keeps widths static.
- A ResizeObserver moves secondary actions into the menu when the action row runs out of room.
- Below a 560px container the root breadcrumb hides, the tab row scrolls sideways with a faded edge, and below 460px the create button drops to an icon.
- The header condenses from the scroll of its own inner scroller, not the window, so page content must live inside that scroller.
- Scroll handling only compares scrollTop to a 16px threshold, so it re-renders when crossing it, not on every frame.
- Tab counts roll with Animated counter and the tab indicator uses a shared layoutId; both are cheap at a handful of tabs.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use at the top of a project, repository or record page that scrolls beneath it.
- The block takes no props: replace the in-file project, people and tab data with your own, or lift them into props.
- Follow, Share update, Copy link, New issue and Archive are simulated; wire them to your API and the breadcrumbs to your router.
- Composes Arc Button, Badge, Animated counter, Avatar, Avatar group and Progress.
The full library index for assistants is at /llms.txt.