Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Matched Pairs Comparison Block for React

Five pains of bank reconciliation matched row by row with their fixes, an arrow between each pair and an improvement chip on every fix.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A comparison block for React with Base UI, written for Reckonfold, a fictional bank-reconciliation tool. Under a centred header, five pains sit at the start of ruled rows and their fixes at the end, aligned row by row, with an arrow on a hairline between them and a chip such as −4 h a week on every fix. The arrow mirrors in right-to-left. On a phone each pair stacks, the pain first and a down arrow between. The rows run from rail to rail and end the block. It is built from Badge and Guides, and every figure is example data.

FAQ

How do I add a pair?

Add an object to PAIRS with the pain, the fix, a line for each and the change chip. The rows, the labels and the arrows come from the array.

How is it read by a screen reader?

Each pain is an h3 read as "Before: …", and each fix is read as "With Reckonfold: …", so the pair is clear even without the visual alignment. The arrow is decoration.

What does a phone show?

One column: the pain with a small "Before" label, a down arrow, then the fix with its label and chip, repeated for each pair.

Does the arrow flip in right-to-left?

Yes. The side arrow on wide screens mirrors, so it still points from the pain to the fix. The chips keep their own direction so the sign and unit stay in order.

Why a true minus sign?

The chips use the real minus character, not a hyphen, so the figure reads as a number and is not split at a line break.

Are the figures real?

No. Reckonfold is fictional and the improvements are example data.

  • Pro

    Toggle Swap Problem Solution

    Comparisons

    A toggle that swaps the text of every row of one list between the problem and the answer in place, with an impact line under each.

  • Pro

    Struck Through Before After

    Comparisons

    Tabs of three workflows, each with a Before list where removed steps are struck through and an After list, a step count and one customer line.

  • Pro

    Split Panel Comparison Hero

    Features and tables

    A split hero for a status-page product: the headline and two calls to action beside a comparison table against a self-hosted page, in a hairline frame.

  • Pro

    Traditional Vs Modern Split Features

    Proof and comparisons

    A static old-way against new-way comparison for a release tool: four tasks in one framed figure, the old way struck through beside the modern way, each with its time as a chip and the share of waiting a change gets back.

  • Pro

    Drawn Bento Use Cases

    Customers

    A bento of four use cases in shared hairlines, each with a small greyscale drawing of its screen, a badge, a title, one line and a metric.

  • Pro

    Grouped Competitor Table About

    Comparisons

    A grouped comparison for an ETL tool: sixteen features in Core, Security and Support, a toggle that rings one vendor column, and a note on the rows that need one.

All 150 about blocks