# Hero blueprint (goodtabs UI)

A hero on a dotted grid with dashed guides and dimension labels around a content slot.

## Install

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

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

## Usage

```tsx
import { HeroBlueprint } from "@/components/hero-blueprint"
import { Button } from "@/components/ui/button"

<HeroBlueprint
  eyebrow="Design systems"
  title="Measure twice, ship once"
  actions={<Button>Read the spec</Button>}
/>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| eyebrow | `string` |  | Small uppercase line above the title. |
| title | `ReactNode` |  | The headline. |
| description | `ReactNode` |  | One or two sentences under the title. |
| actions | `ReactNode` |  | Buttons and links. |
| children | `ReactNode` |  | The live slot below the actions: a demo, screenshot or control. |

## When to use

- A landing page for a design system, a token set or a tool for builders
- When the product is about precision and a drawn grid backs that up
- With a live slot to show the real thing inside the guides

## When not to use

- Consumer or editorial pages, where the technical drawing feels cold
- More than once on a page, or inside app screens
- Over a photo or a busy background, which hides the dots

## Notes for agents

- Static server component with no motion; the grid, guides and labels are aria-hidden decoration
- The content block has a background, so the dots stop at its edge and text keeps its contrast
- The labels are fixed text (max 768, 16 px grid) that match max-w-3xl and the 16px dot spacing; edit them if you change either
- Guides sit at the section's vertical padding, so className overrides of py-* should move top and bottom offsets too

## The maths

- Dots repeat every 16px, which is 4 × the 4px unit, so every spacing token lands on a dot.
- The content box is max-w-3xl = 48 × 16 = 768px, and the dimension line is labelled with that number.
- Guides sit at top-16 and bottom-16, 64px or 4 grid cells in, with the same offset on both sides so the frame is symmetric.

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