# Shadcn Compare blocks

> Versus sections that set a product against the workflow it replaces, as a feature matrix, a card beside a plain list or 2 step tracks.

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

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

## Blocks

- [Old vs New](https://web.dev.reui.io/blocks/marketing/compare/compare-1.md): Workflow comparison card with 2 numbered 5-step tracks, a hatched VS rail and time-cost bands. 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.
- [Feature Matrix](https://web.dev.reui.io/blocks/marketing/compare/compare-2.md): 3-column feature comparison table with a center emerald checkmark column. Best for a tick per capability on an emerald center strip between the feature and its manual step, keeping all 3 columns when narrow.
- [Tool vs Manual](https://web.dev.reui.io/blocks/marketing/compare/compare-3.md): Lit emerald capability card beside a plain prompt-only step list, a 2-column feature comparison. Best for capabilities printed on the emerald card itself with no tick column, opposite a bare list of manual steps that stacks below it.

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.