# Vertical Demo Tabs block

> Vertical 3-step How It Works tabs that swap analytics, crew coverage and HR dashboard consoles

Steps cycle every 5s and wait while hovered or focused; each opens an animated console with KPI cards plus an order table, crew coverage bars or a team calendar. Made with shadcn Tabs, Table, Progress, Avatar, ReUI IconTile, Badge. For SaaS demo.

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

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

## Agent notes

- The 3 steps are `STEPS`, each mapped to a console by `value` in the `PANELS` map; renaming a step means renaming its key
- The consoles are mock screens built from `KPIS`, `ORDERS`, `COVERAGE_ROWS` and `CAL_DAYS` with no handlers; swap them and `BACKDROP_SRC`
- `STEP_DWELL_MS` sets the 5000 ms auto-advance and 0 stops it; hover or focus on the step column or the console pauses it

## When not to use

- A working reporting page whose charts, filters and tables respond to input: use the [Analytics blocks](https://web.dev.reui.io/blocks/solutions/analytics.md)
- Four steps in a top strip that swap the views of one app console: 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-5
```

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