Page header

A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.

Preview

Live · keyboard ready

Checkout redesign

On track

Rebuilding mobile checkout around saved payment methods and a single review step, then rolling it out in stages from October 14.

Led by Emma CollinsTarget Oct 14

31 of 40 issues done78%

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 ago
Marcus Johnson merged the saved cards endpoint
3h ago
Emma Collins shared Checkout flows v3
Yesterday
Sofia Ramirez closed CHK-119, a double charge on retry
Yesterday
Jasmine Brooks set the rollout date to October 14
Sep 17

When to use

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.

When not to use

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.

shadcn CLI

Also installs (7)

manicat-foundation
animated-counter
avatar
avatar-group
badge
button
progress

Manual install(+)

registry.jsonjson

{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "page-header",
  "type": "registry:block",
  "title": "Page header",
  "description": "A project page header that folds into a compact bar as you scroll, with tabs whose counts roll.",
  "categories": [
    "blocks"
  ],
  "dependencies": [
    "@radix-ui/react-dropdown-menu",
    "@radix-ui/react-tabs",
    "lucide-react",
    "motion"
  ],
  "registryDependencies": [
    "https://manicat.viraza.net/r/manicat-foundation.json",
    "https://manicat.viraza.net/r/animated-counter.json",
    "https://manicat.viraza.net/r/avatar.json",
    "https://manicat.viraza.net/r/avatar-group.json",
    "https://manicat.viraza.net/r/badge.json",
    "https://manicat.viraza.net/r/button.json",
    "https://manicat.viraza.net/r/progress.json"
  ],
  "files": [
    {
      "path": "registry/blocks/page-header/page-header.tsx",
      "type": "registry:component",
      "target": "@components/manicat/blocks/page-header/page-header.tsx"
    },
    {
      "path": "registry/blocks/page-header/page-header.module.css",
      "type": "registry:component",
      "target": "@components/manicat/blocks/page-header/page-header.module.css"
    },
    {
      "path": "registry/components/progress/progress.tsx",
      "type": "registry:component",
      "target": "@components/manicat/progress/progress.tsx"
    },
    {
      "path": "registry/components/progress/progress.module.css",
      "type": "registry:component",
      "target": "@components/manicat/progress/progress.module.css"
    },
    {
      "path": "registry/components/button/button.tsx",
      "type": "registry:component",
      "target": "@components/manicat/button/button.tsx"
    },
    {
      "path": "registry/components/button/button.module.css",
      "type": "registry:component",
      "target": "@components/manicat/button/button.module.css"
    },
    {
      "path": "registry/components/badge/badge.tsx",
      "type": "registry:component",
      "target": "@components/manicat/badge/badge.tsx"
    },
    {
      "path": "registry/components/badge/badge.module.css",
      "type": "registry:component",
      "target": "@components/manicat/badge/badge.module.css"
    },
    {
      "path": "registry/components/avatar-group/avatar-group.tsx",
      "type": "registry:component",
      "target": "@components/manicat/avatar-group/avatar-group.tsx"
    },
    {
      "path": "registry/components/avatar-group/avatar-group.module.css",
      "type": "registry:component",
      "target": "@components/manicat/avatar-group/avatar-group.module.css"
    },
    {
      "path": "registry/components/avatar/avatar.tsx",
      "type": "registry:component",
      "target": "@components/manicat/avatar/avatar.tsx"
    },
    {
      "path": "registry/components/avatar/avatar.module.css",
      "type": "registry:component",
      "target": "@components/manicat/avatar/avatar.module.css"
    },
    {
      "path": "registry/components/animated-counter/animated-counter.tsx",
      "type": "registry:component",
      "target": "@components/manicat/animated-counter/animated-counter.tsx"
    },
    {
      "path": "registry/components/animated-counter/animated-counter.module.css",
      "type": "registry:component",
      "target": "@components/manicat/animated-counter/animated-counter.module.css"
    }
  ],
  "docs": "Docs and live preview: https://uiarc.dev/components/blocks/page-header",
  "meta": {
    "tier": "free",
    "kind": "block",
    "docs": "https://manicat.viraza.net/components/blocks/page-header",
    "markdown": "https://uiarc.dev/components/blocks/page-header/markdown"
  }
}

Usage

Install the component, then copy this into your app. Change the content and the props to fit your screen.

example.tsxtsx

"use client";

import { PageHeader } from "manicat/registry/blocks/page-header/page-header";

export function PageHeaderExample() {
  return <PageHeader />;
}

Examples

Real screens rather than isolated props. Switch to Code to copy a whole example into your project.

Settings page header The top of an app page: title, description and actions.

Live · keyboard ready

Checkout redesign

On track

Rebuilding mobile checkout around saved payment methods and a single review step, then rolling it out in stages from October 14.

Led by Emma CollinsTarget Oct 14

31 of 40 issues done78%

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 ago
Marcus Johnson merged the saved cards endpoint
3h ago
Emma Collins shared Checkout flows v3
Yesterday
Sofia Ramirez closed CHK-119, a double charge on retry
Yesterday
Jasmine Brooks set the rollout date to October 14
Sep 17

settings-page-header-the-top-of-an-app-page-title-description-and-actions-.tsxtsx

"use client";

import { PageHeader } from "manicat/registry/blocks/page-header/page-header";

export function PageHeaderSettingsExample() {
  return <PageHeader />;
}

Keyboard interactions

Keys	Action
Arrow keys	Move between tabs (Radix tabs) and through the actions menu, which loops.
Enter / Space	Activates the focused tab or menu item.

Accessibility

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.

Motion

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.

Responsive behavior

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.

Performance

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

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.

Milestones

Recent activity

When to use

When not to use

Usage

Examples

Settings page header The top of an app page: title, description and actions.

Milestones

Recent activity

Keyboard interactions

Accessibility

Motion

Responsive behavior

Performance

Notes for AI

Related