shadcn.io is not affiliated with official shadcn/ui
Matched Pairs Comparison Block for Ark UI
Five pains of bank reconciliation matched row by row with their fixes, an arrow between each pair and an improvement chip on every fix.
Installation
Overview
A comparison block for React with Ark 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.