# Page Header

A page or section title with a description and actions.

Source: [page-header.tsx](https://github.com/jakejarvis/jarvis-ui/blob/main/src/components/ui/page-header.tsx)

```tsx
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 registry, once per project:

```bash
npx shadcn@latest registry add @jarvis=https://ui.jarv.is/r/{name}.json
```

Then add the component:

```bash
npx shadcn@latest add @jarvis/page-header
```

## Usage

```tsx
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.

```tsx
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](https://base-ui.com/react/handbook/styling) and [composition](https://base-ui.com/react/handbook/composition) guides describe.

### PageHeader

| Prop    | Type                | Description          |
| ------- | ------------------- | -------------------- |
| `size?` | `"default" \| "sm"` | Default: `"default"` |