# Two-Product Compare block

> Two-Product Comparison with Auto Winner Indicators

Side-by-side product comparison with swappable selector cards, multi-group feature table, and automatic winner highlighting. ReUI Badge; shadcn Button, Select, Tooltip. Perfect for purchase decisions, ecommerce comparison pages, product spec lookups.

- Type: Pro block
- Category: [Comparison](https://web.dev.reui.io/blocks/ecommerce/comparison.md)
- Page: https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-2
- MCP: `get_block("comparison-2")`
- Built with: Badge, Button, Select, Tooltip
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A head to head of 2 models, each chosen from a dropdown on its card, with a Swap button and the better numeric spec emphasized

## Agent notes

- Both selector cards call `handleAddToCart`, which only logs the product name; wire your cart action there
- Winner emphasis shows only on text rows with `winnerDirection` set in `FEATURE_GROUPS`; `pickWinner` reads the last number in each value
- `DEFAULT_A` and `DEFAULT_B` set the starting pair and what Reset restores; both must be ids in `PRODUCTS`

## When not to use

- A catalog where shoppers toggle up to 4 models into a live spec panel: use [Compare Builder](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-6.md) (`get_block("comparison-6")`)
- Two AI models answering one prompt side by side: use [Model Comparison](https://web.dev.reui.io/blocks/ai-agents/ai-chat/ai-chat-7.md) (`get_block("ai-chat-7")`)

## Install

```bash
npx shadcn@latest add @reui/comparison-2
```

## About Comparison blocks

### When to use

- A store decision step that lines up rival models on price, star rating and their features or test scores
- Buying guides built on editor picks or on models ranked by a scored review
- Shopper driven matchups where buyers pick, swap or remove the models being weighed

### When not to use

- Subscription plans or tiers of your own service, billed monthly, yearly or per seat: use the [Pricing blocks](https://web.dev.reui.io/blocks/marketing/pricing.md)
- A versus pitch that sets your tool against manual work or a rival approach: use the [Compare blocks](https://web.dev.reui.io/blocks/marketing/compare.md)
- Several metric series plotted against each other over a time range: use the [Line Chart blocks](https://web.dev.reui.io/blocks/chart/line-chart.md)

### Agent notes

- Replace `PRODUCTS` and the `ProductId` union in components/data.tsx; each `href` there is a hash anchor to point at a real product page
- Each `Comparison` root sets its own `max-w-6xl` width and page padding, and page.tsx adds `min-h-svh`; strip them inside your layout
- `formatCurrency` hardcodes USD with `maximumFractionDigits` at 0; set your store currency and cents there

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.