shadcn.io is not affiliated with official shadcn/ui
Struck Through Before After Block for Radix UI
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.
Installation
Overview
A before-and-after block for React with Radix UI, written for Handoffly, a fictional document-approvals tool. A line tab band lets you pick a workflow: contract renewals, expense sign-off or new-hire paperwork. The open panel shows two lists side by side. Before keeps every old step in order and strikes through the ones that disappeared; After lists the steps that remain and what changed in each. A foot band sets the count, such as 5 steps to 2, worked out from the lists, beside one customer's line. Every panel is sized by an unseen copy of the others, so switching never moves the page. It is built from Tabs and Guides. The customers and figures are example data.
FAQ
How do screen readers know a step is gone?
A removed step is a real del element, and a hidden prefix reads "Removed:" before it, so the strike-through is not only visual.
Where does the count come from?
It is worked out from the two lists. Add or strike a step in the data and "5 steps to 2" and the number of removed steps update themselves.
Does the page move when I switch workflow?
No. An unseen copy of every panel sits in the same grid cell as the open one, so the cell is always as tall as the tallest workflow.