# Shadcn How It Works blocks

> How it works sections that walk a product in numbered steps, from step grids to tabs that swap a product console.

- Type: Pro blocks (Marketing)
- Page: https://web.dev.reui.io/blocks/marketing/how-it-works
- Blocks: 5
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## 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

## Third-party libraries

- Motion v12: [API reference](https://motion.dev/docs/react-motion-component), [docs](https://motion.dev/docs/react), used by 1 of 5 blocks (the docs follow the latest Motion, with no React API break since v12)

## Blocks

- [Three-Step Explainer](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-1.md): Static How It Works card with 3 numbered steps on a hairline grid and 2 header actions. Best for a compact static explainer with 3 numbered steps ruled into one shared card, under an eyebrow pill that is itself a link.
- [Onboarding Step Cards](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-2.md): Drifting isometric logo tiles topping 4 How It Works step cards in a 1, 2 or 4 column grid. Best for step cards topped by dark isometric scenes of drifting brand logo tiles, each with a Step badge and its own footer button.
- [Setup Guide Cards](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-3.md): Emerald 5-step How It Works card grid with dot texture, lime corner glow and capability rows. Best for a 5 step run of emerald cards with a dot texture and lime glow, under an amber button and 2 capability rows.
- [Product Tour Tabs](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-4.md): Horizontal 4-step How It Works tab strip driving an auto-advancing app console on a sky photo. Best for tabs laid across the top that swap 4 views inside one app console, lighting its sidebar row for the active step.
- [Vertical Demo Tabs](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-5.md): Vertical 3-step How It Works tabs that swap analytics, crew coverage and HR dashboard consoles. Best for a side column of 3 step tabs that each open a different console, an order queue, crew coverage or an HR people dashboard.

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.