# Section header

> An eyebrow, a heading and a description. It also sets the heading id that a section uses for its accessible name.

Facade UI item `section-header` (ui, atom).
Docs page: https://facadeui.dev/components/section-header · Registry JSON: https://facadeui.dev/r/section-header.json

## Install

```bash
npx shadcn@latest add @facade/section-header
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/section-header.json`. The CLI also installs what it needs: @facade/eyebrow, @facade/heading, @facade/types, @facade/utils.

Files: `components/ui/section-header.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/section-header-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { Button } from "@/components/ui/button"
import { SectionHeader } from "@/components/ui/section-header"

export function Demo() {
  return (
    <div className="flex flex-col gap-14">
      <SectionHeader
        eyebrow="Features"
        title="Everything a marketing page needs"
        description="Composable sections that read like code you wrote yourself, because after install they are."
        actions={<Button variant="outline">Browse sections</Button>}
      />
      <SectionHeader
        align="center"
        size="lg"
        title="Centred, one size larger"
        description="Alignment and scale are independent of the heading level."
      />
    </div>
  )
}
```

## Props

### SectionHeaderProps

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` (required) | `ReactNode` |  |  |
| `eyebrow` | `ReactNode` |  | Small label above the heading. |
| `description` | `ReactNode` |  | Text below the heading. |
| `headingLevel` | `HeadingLevel` | `2` | Heading level. Defaults to `2`. Does not affect `size`. |
| `size` | `"sm" \| "md" \| "lg" \| "xl"` | `"md"` | Visual size. Defaults to `md`. Does not affect `headingLevel`. |
| `align` | `"start" \| "center"` | `"start"` |  |
| `titleId` | `string` |  | The heading's id, for the parent's `aria-labelledby`. Made from the title when omitted. Pass one if two headings would get the same id. |
| `actions` | `ReactNode` |  | Buttons or links shown beside or under the heading. |
| `className` | `string` |  |  |
| `children` | `ReactNode` |  |  |