shadcn.io is not affiliated with official shadcn/ui
Traditional Vs Modern Split Features Block for Vue
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 Vue with Ark 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.