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: A 6 item catalog whose Compare toggles fill up to 4 slots, with dashed empty slots, a selected count badge and Clear all
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 fixed pair of models chosen from dropdowns on two cards: use the Two-Product Compare block
- One focal model with rivals that show their price difference: use the Alternatives Switcher 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
MAX_COMPAREcaps the slots, butSpecRowand the slot header grid hardcode 4 columns, so edit those classes with it- Numeric winners need a
betterdirection on the spec inSPECS, andcomputeWinnersruns only with 2 or more compared products DEFAULT_COMPARED_IDSpreselects 2 products on first load; an empty list starts from the empty state- 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
https://web.dev.reui.io/blocks/ecommerce/comparison/comparison-6.mdget_block("comparison-6")npx shadcn@latest add @reui/comparison-6Shadcn Compare Builder Block
Interactive Product Comparison Builder with Live Spec Panel. Part of the ReUI Shadcn eCommerce Comparison blocks collection.
Catalog grid with compare toggles and live 4-slot comparison panel displaying specs side-by-side with automatic winner highlighting. Uses ReUI Badge and shadcn Button. Ideal for product comparison, feature comparison, and product selection pages.
It is composed from Badge, Button, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Compare Builder 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
- Ranked Scorecards Ranked product scorecard carousel with per-dimension score bars
- Alternatives Switcher Product Comparison with Focused Hero Card and Swappable Alternatives
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 Compare Builder block?
Use it for a 6 item catalog whose Compare toggles fill up to 4 slots, with dashed empty slots, a selected count badge and Clear all.
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 fixed pair of models chosen from dropdowns on two cards, use the Two-Product Compare block. For one focal model with rivals that show their price difference, use the Alternatives Switcher 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 Compare Builder block built with?
Can I restyle the Compare Builder 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.