Page header
A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.
npm install https://animui.stracture.net/__local/package.tgzCheckout 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
Install animui once, then import any component or block from its typed package entry.
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { PageHeader } from 'animui/page-header';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideUsage
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 "animui/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 animui Button, Badge, Animated counter, Avatar, Avatar group and Progress.
The full library index for assistants is at /llms.txt.