# Shadcn Comparison blocks

> Product comparison tables with side-by-side feature and specification layouts.

- Type: Pro blocks (eCommerce)
- Page: https://web.dev.reui.io/blocks/ecommerce/comparison
- Blocks: 6
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

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

## Third-party libraries

- Embla Carousel v8: [API reference](https://www.embla-carousel.com/docs/v8/api), [docs](https://www.embla-carousel.com/docs/v8/get-started/react), used by 1 of 6 blocks
- 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), used by 1 of 6 blocks

## Blocks

- [Spec Comparison Table](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-1.md): Side-by-side product comparison table with grouped specs and sticky labels. 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.
- [Two-Product Compare](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-2.md): Two-Product Comparison with Auto Winner Indicators. 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.
- [Buying Guide Picks](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-3.md): Editor's pick comparison cards with ratings, feature checklist and add-to-cart. Best for a static set of 3 editor pick cards, each with a sales pitch, a struck through feature checklist and 4 key spec chips.
- [Ranked Scorecards](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-4.md): Ranked product scorecard carousel with per-dimension score bars. Best for scorecards sorted by overall score and paged 3 at a time, with 5 dimension bars, a wins count and a corner ribbon on the leader.
- [Alternatives Switcher](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-5.md): Product Comparison with Focused Hero Card and Swappable Alternatives. Best for a focal model beside 3 alternatives that show their price difference from it and a Switch button that moves them into focus.
- [Compare Builder](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-6.md): Interactive Product Comparison Builder with Live Spec Panel. 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.

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.