shadcn.io is not affiliated with official shadcn/ui
Traditional Vs Modern Split Features Block for React
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.
Installation
Overview
A comparison section for React with Base UI. A centred header sits over one framed figure with two columns around a divider that carries a VS mark. Four rows, one per task (ship a change, review, track, approve), put the old way in muted, struck-through text beside the modern way in plain text, each with the time it takes as a chip. A strip at the foot adds up the old times and the new ones and says what share of the waiting each change gets back. Nothing toggles and nothing slides. From sm the columns sit side by side; on a phone each row puts the old way over the new one, each with its own label. It's built from Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For products that replace a slow routine with a fast one.
FAQ
How do I change the tasks and the times?
Edit TASKS at the top of the file: each task has the old and the modern text and the minutes each takes. The chips, the two totals and the "less waiting" percentage are all worked out from those minutes, so they always agree.
How are the times written?
formatTime writes minutes as minutes, sixty or more as hours, and a working day (480 minutes) or more as days, so 960 minutes is "2 days". Change DAY if your working day is a different length.
How does a screen reader read it?
Each row is a list item with an h3 for the task. The two sides are paragraphs that start with their label ("The old way", "The modern way"), then the step and its time. The visible column headings and the VS mark are decoration and are hidden from assistive technology.
Related
- Pro
Before After Toggle Features
Live controlsA Before and After control that cross-fades a settings screen between a cluttered version (warning banners, a nested menu, badges everywhere) and a clean one, in a frame that never changes height.
- Pro
Before After Visual Features
Proof and comparisonsThree measured outcomes as ruled rows, each with its own Before and After control that swaps both the figure and the bar: page weight, load time and weekly support tickets.
- Pro
Vs Competitor Comparison Table Features
Proof and comparisonsAn eight-row comparison of a project suite with an unnamed typical tool, with real values, a monochrome check or dash, a count of where it leads and a Switch that shows only the rows that differ.
- Pro
Drag Handle Responsive Comparator Features
Live controlsA responsive-width resizer for a preview tool: drag the edge of a small shop page, or pick Phone, Tablet or Desktop, and the page reflows at its real breakpoints while a badge names the width.
- Pro
Added Removed Diff List Features
App screensA unified diff of one config file in a hairline frame, with + and - gutters in foreground weights, one caption beside each hunk, folded runs of unchanged lines that open in place, and a footer counting the changes.
- Pro
Customer Quote Feature Split
Proof and comparisonsA split feature section for a contract-review tool: three feature ticks and a story link beside a framed drawing of a contract under review, with a customer quote card that overlaps the frame's corner.