# Hero (goodtabs UI)

A marketing hero with eyebrow, title, actions, a stats strip and a visual slot.

## Install

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

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

## Usage

```tsx
import { Hero } from "@/components/hero"
import { Button } from "@/components/ui/button"

<Hero
  eyebrow="goodtabs UI"
  title="Production UI, picked by a person"
  description="Free shadcn components in one calm look."
  actions={<><Button>Browse components</Button><Button variant="outline">Docs</Button></>}
  stats={[{ 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, usually one primary and one outline. |
| align | `"center" | "left"` | `"center"` | Centered for a landing page, left for a product page. |
| size | `"sm" | "default" | "lg"` | `"default"` | Title scale and vertical rhythm. sm fits a card or narrow column. |
| stats | `{ value: string; label: string }[]` |  | Three or four numbers under the actions. |
| children | `ReactNode` |  | Optional visual below: a screenshot frame, a demo, an image. |

## When to use

- The top of a landing or product page, one per page
- When the message is a title, a line of support and one or two actions
- With a stats strip when three or four numbers make the case

## When not to use

- Inside app screens or dashboards, where a page title is enough
- For a list of features or pricing, which have their own sections
- More than once on a page

## Notes for agents

- Server component with no state; pass buttons from @/components/ui/button into actions
- Default size uses text-4xl sm:text-5xl; lg adds lg:text-6xl; sm is for cards and previews
- children render below the text with mt-10, meant for a browser-frame or screenshot
- The section carries py-16 lg:py-24 and a max-w-6xl container, so place it directly in main

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