# Alternatives Switcher block

> Product Comparison with Focused Hero Card and Swappable Alternatives

Compare a focal product against alternatives in a hero card plus stacked rivals showing price deltas, star ratings, and feature checklists; tap Switch to swap the hero. ReUI Badge, shadcn Button. For product, comparison, and buying-guide 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-5
- MCP: `get_block("comparison-5")`
- Built with: Badge, Button
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A focal model beside 3 alternatives that show their price difference from it and a Switch button that moves them into focus

## Agent notes

- The hero Add to cart button in `FocusedHero` has no `onClick`, and the alternative strips have no cart button
- `SPECS` and `compareSpec` are exported but unused by the UI; only `comparePrice` drives the price delta
- `hasFeature` infers the Hi-res audio row from the `codec` string, so a codec name other than LDAC or aptX HD shows as missing

## When not to use

- A marketing banner that promotes a featured campaign with quick add tiles: use [Bento Shop Hero](https://web.dev.reui.io/blocks/ecommerce/shop-hero/shop-hero-2.md) (`get_block("shop-hero-2")`)
- Three side by side picks each labeled by a badge such as best value: use [Buying Guide Picks](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-3.md) (`get_block("comparison-3")`)

## Install

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

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