# Spec Comparison Table block

> Side-by-side product comparison table with grouped specs and sticky labels

Compare products column by column with grouped feature rows, star ratings, hint tooltips, badges, pricing, and removable columns over a sticky-label scroll area. ReUI Badge; shadcn Button, Tooltip, Scroll Area. Specs table, product picker.

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

## Best for

A spec table of 6 product columns that scrolls sideways past a pinned label column, with an X to drop any column and a Reset

## Agent notes

- Each feature row in `FEATURE_GROUPS` needs a `values` entry for every `ProductId`, so a new product means editing every row
- The Add to cart buttons in each header call `handleAddToCart`, which only logs the product name; wire your cart there
- Removing a column or `handleReset` only changes `activeProducts` state, so persist the kept columns yourself for a reload

## When not to use

- A list of line items with quantity steppers and an order summary: use [Data Table Cart](https://web.dev.reui.io/blocks/ecommerce/shopping-cart/shopping-cart-3.md) (`get_block("shopping-cart-3")`)
- A plain scrollable region of cards or text with no spec rows: use [Scroll Area](https://web.dev.reui.io/components/scroll-area.md) (`get_component("scroll-area")`)

## Third-party libraries

- Base UI v1: [API reference](https://base-ui.com/react/components), [docs](https://base-ui.com/react/overview/quick-start), [llms.txt](https://base-ui.com/llms.txt)

## Install

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

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