Skip to content
38

Comparison.

Comparison sections that put your product beside the alternative: us-and-them panels and side-by-side tables with per-row checks.

4 blocks, live at full size, install from here

01 / 04Us vs them, two columns, check and minus rows

Comparison 01

Two-column us-and-them panel: a featured column of checked points beside a muted column of the usual trade-offs, split by a divider that stacks on mobile.

npx shadcn@latest add https://hirael.com/r/comparison-01.json

02 / 04Three columns, feature matrix, highlighted column

Comparison 02

Three-column feature matrix with a highlighted middle column, mixed tick and text cells, and a call to action in the footer row.

npx shadcn@latest add https://hirael.com/r/comparison-02.json

03 / 04Before and after, two panels, outcome strip

Comparison 03

Before and after panels side by side, the old way muted with crosses and the new way ticked, a Before/After switch on small screens, closing on an outcome strip.

npx shadcn@latest add https://hirael.com/r/comparison-03.json

04 / 04Sticky plans, Column focus, Differences only

Comparison 04

Three-plan feature matrix with a sticky plan header, a column highlight that follows the pointer, a switch that hides rows where every plan is equal, and a single-plan picker on small screens.

npx shadcn@latest add https://hirael.com/r/comparison-04.json