For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.
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
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
- A plain sliding row of items with wishlist toggles and no scores: use the New Arrivals Carousel block
- Subscription plans or tiers of your own service, billed monthly, yearly or per seat: use the Pricing blocks
- A versus pitch that sets your tool against manual work or a rival approach: use the Compare blocks
- Several metric series plotted against each other over a time range: use the Line Chart blocks
Agent notes
overallis stored per product inPRODUCTS, not averaged from the 5 dimension scores, and the ranking sorts by ithandleAddToCartonly 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
methodologyid that no element in the block defines - Replace
PRODUCTSand theProductIdunion in components/data.tsx; eachhrefthere is a hash anchor to point at a real product page - Each
Comparisonroot sets its ownmax-w-6xlwidth and page padding, and page.tsx addsmin-h-svh; strip them inside your layout formatCurrencyhardcodes USD withmaximumFractionDigitsat 0; set your store currency and cents there
Third-party API docs
- Embla Carousel v8: API reference, docs, through shadcn Carousel
https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-4.mdget_block("comparison-4")npx shadcn@latest add @reui/comparison-4Shadcn Ranked Scorecards Block
Ranked product scorecard carousel with per-dimension score bars. Part of the ReUI Shadcn eCommerce Comparison blocks collection.
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.
It is composed from Badge, Button, Carousel, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Ranked Scorecards Block
- Install it with the ReUI registry command in the toolbar above, then swap the placeholder content, data wiring, and business logic for your own.
- Compare it across all eight ReUI styles and both the Base UI and Radix bases in the customizer before committing to one direction.
- Combine it with the other Shadcn eCommerce Comparison blocks to assemble a full screen instead of a single section.
All Shadcn eCommerce Comparison Blocks
The rest of this category, each on its own page with a live preview, the components it is built from, and the install command.
- Spec Comparison Table Side-by-side product comparison table with grouped specs and sticky labels
- Two-Product Compare Two-Product Comparison with Auto Winner Indicators
- Buying Guide Picks Editor's pick comparison cards with ratings, feature checklist and add-to-cart
- Alternatives Switcher Product Comparison with Focused Hero Card and Swappable Alternatives
- Compare Builder Interactive Product Comparison Builder with Live Spec Panel
Related Shadcn eCommerce Block Categories
- Category Card (6) Category cards with featured products, banners, and subcategory navigation.
- Checkout (7) Checkout flows with shipping details, payment forms, and order confirmation steps.
- Coupon (6) Coupon code input fields, discount badges, and promotional offer display blocks.
- Filter Sidebar (7) Filter and facet sidebars for refining product searches by price, size, and attributes.
- Product Card (10) E-commerce product cards with images, pricing, variants, and add-to-cart actions.
- Product Detail (6) Product detail pages with image galleries, specifications, and purchase options.
All Shadcn Block Groups
Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.
- Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
- Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
- Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
- Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
- Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
- Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
- Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.
Frequently Asked Questions
When should I use the Ranked Scorecards block?
Use it 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.
The Comparison category fits:
- 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
For a plain sliding row of items with wishlist toggles and no scores, use the New Arrivals Carousel block. For subscription plans or tiers of your own service, billed monthly, yearly or per seat, use the Pricing blocks. For a versus pitch that sets your tool against manual work or a rival approach, use the Compare blocks. For several metric series plotted against each other over a time range, use the Line Chart blocks.
What is the Ranked Scorecards block built with?
Can I restyle the Ranked Scorecards block?
How should I use Shadcn comparison blocks in a real project?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.