# Three-Step Explainer block

> Static How It Works card with 3 numbered steps on a hairline grid and 2 header actions

Explains adoption in 3 steps under a pill eyebrow link, heading, lede and outline plus solid buttons; steps stack to 1 column when narrow. Uses shadcn Card, Item, Button with ReUI IconTile number chips and a Badge link. For process, getting started.

- Type: Pro block
- Category: [How It Works](https://web.dev.reui.io/blocks/marketing/how-it-works.md)
- Page: https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-1
- MCP: `get_block("how-it-works-1")`
- Built with: Badge, Button, Card, Icon Tile, Item
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A compact static explainer with 3 numbered steps ruled into one shared card, under an eyebrow pill that is itself a link

## Agent notes

- The 3 steps are `HOW_IT_WORKS_STEPS`; the number chip is the render index, so reorder entries rather than editing numerals
- The eyebrow `Badge` and both header `Button` actions are anchors with a placeholder `href`; point them at real routes
- The step grid is fixed at 3 columns from the `@4xl` container width, so a 4th `HOW_IT_WORKS_STEPS` entry wraps to a lone row

## When not to use

- Cards that each carry their own artwork, a step badge and a footer button: use [Onboarding Step Cards](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-2.md) (`get_block("how-it-works-2")`)
- A walkthrough where choosing a step swaps in the product screen it describes: use [Product Tour Tabs](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-4.md) (`get_block("how-it-works-4")`)

## Install

```bash
npx shadcn@latest add @reui/how-it-works-1
```

## About How It Works blocks

### When to use

- A landing page section that walks visitors through a product in 3 to 5 numbered steps
- A getting started explainer for a developer tool that sends readers on to its docs
- A product tour where picking a step swaps in a preview of the app screen it describes

### When not to use

- A bare grid of numbered steps to place under a heading and copy you already wrote: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A live overview page of KPI tiles, charts and tables wired to real data: use the [Dashboard blocks](https://web.dev.reui.io/blocks/application/dashboard.md)
- The opening section of a landing page, with its main headline and signup action: use the [Hero blocks](https://web.dev.reui.io/blocks/marketing/hero.md)

### Agent notes

- The eyebrow `Badge`, `h2` headline and lede are written inline in `HowItWorks`, not in the data file; rewrite them there
- `HowItWorks` sets its own `py-12` padding, `max-w-7xl` width and `bg-background` fill; strip them inside a page that already pads its sections
- Step layouts reflow on the `@container` width set inside `HowItWorks`, not the viewport, so they follow the column the block sits in

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.