# Hero split (goodtabs UI)

A hero with the copy on one side and the product on the other.

## Install

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

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

## Usage

```tsx
import { HeroSplit } from "@/components/hero-split"
import { Button } from "@/components/ui/button"

<HeroSplit
  eyebrow="Analytics"
  title="Know what your users did this morning"
  description="Dashboards that read from your own database."
  actions={<Button>Start free</Button>}
>
  <img src="/product.png" alt="Dashboard" className="rounded-lg border" />
</HeroSplit>
```

## 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 plain link. |
| side | `"right" | "left"` | `"right"` | Which side the product sits on from the container's 2xl width up. |
| children | `ReactNode` |  | The product: a browser frame, a screenshot, a demo. |

## When to use

- The top of a product page where the screenshot is the proof
- When the headline is short and the product needs real width
- Inside a column or card, since it splits by container width

## When not to use

- A centered landing hero with no product, which wants the hero
- When the visual is a wide banner, which wants a full-width frame below the copy
- More than once on a page

## Notes for agents

- Splits on container width (@2xl), not viewport, so it also works in a narrow column or card
- Server component; pass buttons from @/components/ui/button into actions
- Stacks with the copy first below 42rem, whatever side is set
- The section carries its own vertical padding and a max-w-6xl container, so place it directly in main

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