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 static set of 3 editor pick cards, each with a sales pitch, a struck through feature checklist and 4 key spec chips
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 full grid of specs with every model in its own column: use the Spec Comparison Table block
- One focused model with cheaper and pricier rivals to swap in: 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
RECOMMENDATIONSholds each card'sbadge,pitch,featuresflags andspecschips, apart from thePRODUCTSprice and ratingFEATURE_LISTsets the checklist rows on every card, so eachfeaturesmap 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 - 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-3.mdget_block("comparison-3")npx shadcn@latest add @reui/comparison-3Shadcn Buying Guide Picks Block
Editor's pick comparison cards with ratings, feature checklist and add-to-cart. Part of the ReUI Shadcn eCommerce Comparison blocks collection.
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.
It is composed from Badge, Button, Item, so every part of it is a primitive you can restyle with your own design tokens.
What You Can Build With the Buying Guide Picks 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
- Ranked Scorecards Ranked product scorecard carousel with per-dimension score bars
- 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 Buying Guide Picks block?
Use it for a static set of 3 editor pick cards, each with a sales pitch, a struck through feature checklist and 4 key spec chips.
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 full grid of specs with every model in its own column, use the Spec Comparison Table block. For one focused model with cheaper and pricier rivals to swap in, 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 Buying Guide Picks block built with?
Can I restyle the Buying Guide Picks 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.