# Hero proof (goodtabs UI)

A centered hero with a proof row of numbers or logos under a hairline.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/hero-proof.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/hero-proof`

## Usage

```tsx
import { HeroProof } from "@/components/hero-proof"

<HeroProof
  title="Production UI, picked by a person"
  description="Free components in one calm look."
  proofLabel="By the numbers"
  proof={[{ value: "200", label: "components" }, { value: "MIT", label: "licence" }]}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The headline. A string or your own element. |
| description | `ReactNode` |  | One or two sentences under the title. |
| actions | `ReactNode` |  | Buttons and links. |
| proof | `{ value: string; label: string }[]` |  | Three or four numbers for the proof row. |
| proofLabel | `string` |  | Caption above the proof row. |
| children | `ReactNode` |  | Logos or custom proof, shown when proof is not set. |

## When to use

- A landing hero where numbers or customer names make the case
- When you have three or four real figures, or five or fewer logos
- Inside a column or card, since it reflows by container width

## When not to use

- When there is no proof yet; use the plain hero
- A product-first page, which wants the split hero
- With invented numbers or logos you do not have the right to show

## Notes for agents

- Reflows on container width (@2xl); numbers stay three across, four become two by two when narrow
- Pass either proof or children; proof wins when both are set
- Logos are slots: give them text-muted-foreground, they inherit the color
- Server component; the proof row is a dl, so numbers read as term and value

Docs: https://ui.goodtabs.co/components/hero-proof