# Ranked Scorecards block

> Ranked product scorecard carousel with per-dimension score bars

Carousel paging six products 3-up, ranked by overall 0-10 score across five dimensions with best-in-class bar highlights, top-pick ribbon, star ratings, and add-to-cart. ReUI Badge; shadcn Carousel, Button. Product comparison, buying guide, rankings.

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

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

## Agent notes

- `overall` is stored per product in `PRODUCTS`, not averaged from the 5 dimension scores, and the ranking sorts by it
- `handleAddToCart` only logs the product name when a scorecard button is pressed; wire your cart action there
- The Tested over 50 hours copy is hardcoded, and the How we score link targets a `methodology` id that no element in the block defines

## When not to use

- A plain sliding row of items with wishlist toggles and no scores: use [New Arrivals Carousel](https://web.dev.reui.io/blocks/ecommerce/product-card/product-card-7.md) (`get_block("product-card-7")`)

## 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), through shadcn Carousel

## Install

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

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