Page Header

A page or section title with a description and actions.

import { DownloadIcon, PlusIcon } from "lucide-react";

import { Button } from "@/components/ui/button";
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
} from "@/components/ui/page-header";

export default function PageHeaderBasic() {
  return (
    <PageHeader className="w-full">
      <PageHeaderContent>
        <PageHeaderTitle>Projects</PageHeaderTitle>
        <PageHeaderDescription>Everything your team is working on at Acme.</PageHeaderDescription>
      </PageHeaderContent>
      <PageHeaderActions>
        <Button variant="secondary">
          <DownloadIcon />
          Export
        </Button>
        <Button variant="primary">
          <PlusIcon />
          New project
        </Button>
      </PageHeaderActions>
    </PageHeader>
  );
}

Installation

Add the registryOnce per project
pnpm dlx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
Add page-header
pnpm dlx shadcn@latest add @jarvis/page-header

Usage

import { Button } from "@/components/ui/button";
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
} from "@/components/ui/page-header";

export function ProjectsHeader() {
  return (
    <PageHeader>
      <PageHeaderContent>
        <PageHeaderTitle>Projects</PageHeaderTitle>
        <PageHeaderDescription>Everything your team is working on.</PageHeaderDescription>
      </PageHeaderContent>
      <PageHeaderActions>
        <Button variant="primary">New project</Button>
      </PageHeaderActions>
    </PageHeader>
  );
}

Actions sit beside the title and wrap below it on narrow screens.

Composition

PageHeader
- PageHeaderContent
  - PageHeaderTitle
  - PageHeaderDescription
- PageHeaderActions

Examples

Small

size="sm" is for sections within a page. The title is an <h2>; pass render={<h3 />} to change the level.

Ada Park

Owner

Sam Rivera

Member

Priya Shah

Member

Jonah Kim

Member

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Button } from "@/components/ui/button";
import {
  Item,
  ItemActions,
  ItemContent,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item";
import {
  PageHeader,
  PageHeaderActions,
  PageHeaderContent,
  PageHeaderDescription,
  PageHeaderTitle,
} from "@/components/ui/page-header";
import { people } from "@/examples/data";

export default function PageHeaderSmall() {
  return (
    <section className="w-full">
      <PageHeader size="sm" className="mb-4">
        <PageHeaderContent>
          <PageHeaderTitle render={<h3 />}>Members</PageHeaderTitle>
          <PageHeaderDescription>4 people have access to this project.</PageHeaderDescription>
        </PageHeaderContent>
        <PageHeaderActions>
          <Button variant="secondary" size="sm">
            Invite
          </Button>
        </PageHeaderActions>
      </PageHeader>
      <ItemGroup className="gap-1">
        {people.slice(0, 4).map((person, index) => (
          <Item key={person.value} size="xs">
            <ItemMedia>
              <Avatar size="sm">
                <AvatarImage src={person.image} alt="" />
                <AvatarFallback>{person.initials}</AvatarFallback>
              </Avatar>
            </ItemMedia>
            <ItemContent>
              <ItemTitle>{person.name}</ItemTitle>
            </ItemContent>
            <ItemActions>
              <span className="text-xs text-faint">{index === 0 ? "Owner" : "Member"}</span>
            </ItemActions>
          </Item>
        ))}
      </ItemGroup>
    </section>
  );
}

Props

Part	Extends
PageHeader	<header>
PageHeaderContent	<div>
PageHeaderTitle	<h2>
PageHeaderDescription	<p>
PageHeaderActions	<div>

The tables leave out className, style and render. Parts built on Base UI take them as its styling and composition guides describe.