# Compare Builder block

> Interactive Product Comparison Builder with Live Spec Panel

Catalog grid with compare toggles and live 4-slot comparison panel displaying specs side-by-side with automatic winner highlighting. Uses ReUI Badge and shadcn Button. Ideal for product comparison, feature comparison, and product selection pages.

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

## Best for

A 6 item catalog whose Compare toggles fill up to 4 slots, with dashed empty slots, a selected count badge and Clear all

## Agent notes

- `MAX_COMPARE` caps the slots, but `SpecRow` and the slot header grid hardcode 4 columns, so edit those classes with it
- Numeric winners need a `better` direction on the spec in `SPECS`, and `computeWinners` runs only with 2 or more compared products
- `DEFAULT_COMPARED_IDS` preselects 2 products on first load; an empty list starts from the empty state

## When not to use

- A fixed pair of models chosen from dropdowns on two cards: use [Two-Product Compare](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-2.md) (`get_block("comparison-2")`)
- One focal model with rivals that show their price difference: use [Alternatives Switcher](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-5.md) (`get_block("comparison-5")`)

## Install

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

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