Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

About blocks

Pro

Struck Through Before After Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A before-and-after block for React with Base 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.

How does the keyboard work on the tabs?

Tab moves into the tab list, and the arrow keys move between workflows on Ark and Radix. React Aria and Base UI also let you move with arrows inside the list. Each tab reveals its panel.

What happens on a phone?

The tab band scrolls sideways and the two lists stack, Before above After.

Are the quotes real?

No. Handoffly, its customers and their quotes are fictional and the figures are example data.

  • Pro

    Matched Pairs Comparison

    Comparisons

    Five pains of bank reconciliation matched row by row with their fixes, an arrow between each pair and an improvement chip on every fix.

  • Pro

    Toggle Swap Problem Solution

    Comparisons

    A toggle that swaps the text of every row of one list between the problem and the answer in place, with an impact line under each.

  • Pro

    Split Layout Before After Slider Hero

    Interactive demos

    A split hero for a site speed tool: a headline, a Shine Button and a second action beside a speed report that fills its cell edge to edge, before on one side of a handle and after on the other.

  • Pro

    Before After Toggle Features

    Live controls

    A 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

    Snap Row Case Study Cards

    Customers

    A scroll-snap row of five case-study covers, each with a drawn wordmark, a giant result figure, two tags and a link, and a wider first card.

  • Pro

    Situation Tabs Operating Principles

    Principles and process

    An operating-principles section for an accounting-automation company: line tabs by situation, and under them the open situation's three rules as hairline rows, each with the question we ask.

All 150 about blocks