# Buying Guide Picks block

> Editor's pick comparison cards with ratings, feature checklist and add-to-cart

Three recommendation cards labeled best value, editor's choice and top premium, each with a badge, star rating, price, feature checklist, key specs and add-to-cart. ReUI Badge; shadcn Button, Item. For product picks, comparison, buying guides.

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

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

## Agent notes

- `RECOMMENDATIONS` holds each card's `badge`, `pitch`, `features` flags and `specs` chips, apart from the `PRODUCTS` price and rating
- `FEATURE_LIST` sets the checklist rows on every card, so each `features` map needs a true or false for every name
- Each card's cart button calls `handleAddToCart`, which only logs the product name; wire your cart action there

## When not to use

- A full grid of specs with every model in its own column: use [Spec Comparison Table](https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-1.md) (`get_block("comparison-1")`)
- One focused model with cheaper and pricier rivals to swap in: 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-3
```

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