# Product Tour Tabs block

> Horizontal 4-step How It Works tab strip driving an auto-advancing app console on a sky photo

Setup walkthrough: 4 step tabs swap an app console (KPI overview, component grid, CLI install list, integrations), advancing every 6s, held under pointer or focus. Runs on shadcn Tabs, Card, Progress, ReUI IconTile chips, Badge. For product tour.

- 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-4
- MCP: `get_block("how-it-works-4")`
- Built with: Badge, Card, Icon Tile, Item, Kbd, Progress, Tabs
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

Tabs laid across the top that swap 4 views inside one app console, lighting its sidebar row for the active step

## Agent notes

- The 4 steps are `STEPS`, each tied to a console view by `value` in the `WORKSPACES` map and to a sidebar row by `navId`
- The console views render sample data from `KPIS`, `COMPONENT_GROUPS`, `CLI_ITEMS` and `INTEGRATIONS`; swap these and `FRAME_BACKDROP_SRC`
- Only the step tabs respond; `STEP_DWELL_MS` sets the 6000 ms auto-advance, 0 stops it, and hover or focus pauses it

## When not to use

- Three steps in a side column that each open a different product console: use [Vertical Demo Tabs](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-5.md) (`get_block("how-it-works-5")`)
- A static explainer of 3 steps with no console and no auto-advance: use [Three-Step Explainer](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-1.md) (`get_block("how-it-works-1")`)

## Third-party libraries

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

## Install

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

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