Shadcn Compare Sections: Your Approach Against the One It Replaces
A compare section makes 1 argument: the way the reader works now costs more than yours. All 3 blocks open it the same way, with an eyebrow Badge that is a real link, a headline with its claim on a highlight chip and a lede. What separates them is how they lay out the 2 sides below it.
The sample copy argues for an agent workflow over prompting by hand, and you swap in your own claim. The parts are stock: ReUI Badge and IconTile, with shadcn Card, Tooltip, Item and Button carrying the rest.
All Compare Blocks
Open any block on its own page for a live preview, the components it is built from, and the install command.
How Each Block Lays Out the 2 Sides
- 2 step tracks across a VS rail 5 numbered steps a side inside 1 Card, each an Item with an IconTile numeral, split by a hatched VS rail. Each track closes on a band that states the time it costs, and 2 link Buttons sit in the header.
- A 3-column feature matrix 9 feature rows, a check column on a decorative emerald panel and a column with the manual step a prompt-only workflow leaves in its place. Every feature carries an IconTile and an info button that opens a Tooltip hint.
- An emerald card beside a plain column 7 capabilities on an emerald Card with a dot texture and a lime glow, each with a Tooltip hint, facing a column with no surface that lists the manual step for each one. The card carries a dark scope, so its rules and labels keep the dark palette in either theme.
Details That Hold Up Under Real Copy
- Side by side, 2 of the blocks share rows through CSS subgrid and the third places every cell on 1 grid, so copy that wraps on one side grows the matching row on the other and the dividers stay level.
- Each block switches layout on container queries against its own width, so a compare section in a narrow column folds by the width it is given, not by the viewport.
- Narrow, the step tracks stack with the VS rail as a band between them, the emerald card stacks above its plain column in a single column up to 384px wide, and the matrix drops its panel but keeps all 3 columns, the check column at a 72px minimum.
- Info controls are real buttons named after their feature, and the 2 blocks with hints each run them through 1 shared provider: the first hint opens after 150ms and the ones right after it skip the wait.
- For screen readers the matrix says in text what its columns show: each check reads as covered by the ReUI approach, and each manual step is prefixed with the approach it belongs to.
- Rows, steps, hints and outcome lines come from a typed data file beside the section and the grid is built from that data, so adding or removing a row keeps both sides aligned.
Related Shadcn Block Categories
A comparison is 1 section of the page. These carry the reader before and after it.
- Hero The first screen, where the claim a compare section later backs up is stated.
- How It Works Numbered step sections that walk through the workflow a comparison argued for.
- Pricing Plan cards, comparison tables and upgrade dialogs, the usual next stop once a comparison has made the case.
- CTA Closing bands with a headline and a button for the reader a comparison has convinced.
- eCommerce Comparison Product comparison sections for a store, when the rows are specs rather than a pitch.
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 (344) Browse 344 Shadcn Application blocks across 24 categories.
- Shadcn Data Grid Blocks (39) Browse 39 Shadcn Data Grid blocks across 8 categories.
- Shadcn Solutions Blocks (74) Browse 74 Shadcn Solutions blocks across 10 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.
- Shadcn AI & Agents Blocks (18) Browse 18 Shadcn AI & Agents blocks across 2 categories.
Frequently Asked Questions
What is the difference between a compare block and a product comparison block?
A compare block is a marketing section that argues for one approach over another, with the headline and the verdict built into the layout. A product comparison block is a store section that sets products and their specs side by side for a shopper.
Can I use these for a competitor or alternatives page?
Yes. The rows, steps and hints live in a typed data file next to the section, so your own rows replace the sample without touching the grid. The headline, and in 2 of the blocks the column titles, are plain text in the section file.
How do I install a compare block?
Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in 1 command.
Is a license needed?
Compare blocks are part of ReUI Pro: 1 payment, lifetime updates, every block in every style. The ReUI primitives they build on and the free component examples install with no license.
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
Get All-Access
From $249, once. Lifetime updates.