Shadcn Compare Blocks: Versus Sections for Landing Pages

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

When to use

A versus section on a landing page that sets your product against the old manual way
Before and after, with and without or why us sections on alternative and competitor pages
An old way and new way contrast told as 2 numbered step tracks or as one row per capability

When not to use

A grid of small feature tiles on their own, with no rival path to weigh against: use the Card blocks
A numbered walkthrough of your own product steps, with no old way beside it: use the How It Works blocks
Rival store products lined up on price, star rating and specs for a shopper: use the Comparison blocks

Agent notes

The headline, lede and eyebrow Badge pitching ReUI MCP are written inline in Compare, outside the data file; rewrite them there
Every link, the eyebrow Badge included, carries a placeholder hash href; point each one at a real page
Column and type changes key off the @container/block width, so the block reflows to its parent column, not the viewport

Markdownhttps://web.dev.reui.io/blocks/marketing/compare.md

MCPsearch({ query: "compare", type: "block", category: "compare" })

Full index for agents:llms.txtReUI MCP setup

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.

Old vs New Workflow comparison card with 2 numbered 5-step tracks, a hatched VS rail and time-cost bands
Feature Matrix 3-column feature comparison table with a center emerald checkmark column
Tool vs Manual Lit emerald capability card beside a plain prompt-only step list, a 2-column feature comparison

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

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.