Page header

A layout composition ported from Atlas. Baseline is min-h-[60px] with px-8 py-4. Title uses text-heading-4 font-display (or text-heading-3 via size). Subtitle is text-body-sm font-body text-fg-muted.

Slots are independent. breadcrumb wins over onBack. Action buttons should be default (medium) size, never sm. Pass a Chip or Badge into badge.

Wrap the header in Tabs and pass a TabsList into tabs so the list sits flush on the bottom edge (pb-0 on the header). Style the list as underlines if you want product nav rather than the default pill track.

Usage

import { Chip } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import { PageHeader } from '@/components/ui/page-header';

<PageHeader
  title="Projects"
  badge={<Chip>Active</Chip>}
  subtitle="12 open"
  onBack={() => history.back()}
  actions={
    <>
      <Button variant="outline">Export</Button>
      <Button>New</Button>
    </>
  }
/>

Install

shadcn add @gesso/page-header