# Old vs New block

> Workflow comparison card with 2 numbered 5-step tracks, a hatched VS rail and time-cost bands

Old way vs new way pitch: eyebrow link, headline with a highlighted claim chip, docs and registry CTAs, row-aligned steps that stack when narrow. Built on ReUI Badge, IconTile, shadcn Card, Item, Button. For versus, before and after, why us.

- Type: Pro block
- Category: [Compare](https://web.dev.reui.io/blocks/marketing/compare.md)
- Page: https://web.dev.reui.io/blocks/marketing/compare/compare-1
- MCP: `get_block("compare-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

Two processes as numbered step lists that each end on a time cost band, inside one card with Docs and Registry link buttons

## Agent notes

- `TRADITIONAL_TRACK` and `REUI_TRACK` in `data.ts` hold every step title and description; replace them with your own two processes
- The `outcome` strings carry the sample claims 175 hours and 9 minutes; replace them with figures you can defend
- Each `CompareTrackColumn` takes a `tone` and an `outcomeIcon`, and the lime scale in `TRACK_TONE` marks the track you argue for

## When not to use

- A single 5 step product flow told as one path, with no rival process set beside it: use [Setup Guide Cards](https://web.dev.reui.io/blocks/marketing/how-it-works/how-it-works-3.md) (`get_block("how-it-works-3")`)

## Install

```bash
npx shadcn@latest add @reui/compare-1
```

## About Compare blocks

### When to use

- A versus section on a landing page that sets your product against the old manual way
- Before and after, with and without or why us sections on alternative and competitor pages
- An old way and new way contrast told as 2 numbered step tracks or as one row per capability

### When not to use

- A grid of small feature tiles on their own, with no rival path to weigh against: use the [Card blocks](https://web.dev.reui.io/blocks/application/card.md)
- A numbered walkthrough of your own product steps, with no old way beside it: use the [How It Works blocks](https://web.dev.reui.io/blocks/marketing/how-it-works.md)
- Rival store products lined up on price, star rating and specs for a shopper: use the [Comparison blocks](https://web.dev.reui.io/blocks/ecommerce/comparison.md)

### Agent notes

- The headline, lede and eyebrow `Badge` pitching ReUI MCP are written inline in `Compare`, outside the data file; rewrite them there
- Every link, the eyebrow `Badge` included, carries a placeholder hash `href`; point each one at a real page
- Column and type changes key off the `@container/block` width, so the block reflows to its parent column, not the viewport

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.