Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

User Migration Changelog Block for Radix UI

A source-to-target header with the overall percent at its end and three phases as cells of one band: a count, a progress bar, a state glyph and word, and a finish or expected day.

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

An account-migration status for React with Radix UI, written for Lifthouse, a fictional account migration service. A start-aligned header, "Legacy billing to Billing 2", carries the overall percent at its end as a rolling number counted from the three phases below it. Under a band rule that meets the rails, three cells on vertical hairlines run from rail to rail and end the block: Copy, Verify and Switch over. Each cell has a glyph and a word for its state (Done, In progress, Queued), a count of accounts such as "1.2M of 1.8M", a progress bar and the day it finished or is expected (a fixed time). It is a status, not a control: the figures and days are fixed example data. On a phone the cells stack on horizontal hairlines. It's built from Guides, Progress and Sliding Number, with CSS transitions for the entrance and your theme's tokens for every colour. For migration trackers, data moves and platform switch-overs. The figures are example data.

FAQ

How do I change the phases?

Edit PHASES and TOTAL at the top of the file. A phase has an id, a name, a count of accounts handled, a date as an ISO day, the dateLabel before it ("Finished", "Expected", "Starts") and a state (DONE, RUNNING or QUEUED). The counts, the bars and the overall percent come from those numbers.

How is the overall percent worked out?

The three phases weigh the same: the accounts handled in all of them over three times the total, rounded. With 1.8M copied, 1.2M verified and none switched, that is 56%. The number rolls into place once when it scrolls into view and is read as "56 percent of the move is done".

How is each state told without colour?

By a glyph and a word: a check and "Done", a dotted circle and "In progress", an empty circle and "Queued". The queued one is also lighter. The bar and the count carry the rest.

Why are the counts written as 1.2M?

They are formatted from whole numbers with a fixed English compact format, so the server and every browser write the same text. Change TOTAL and the phase counts and the text follows.

How does it fit on a phone and in a right-to-left layout?

The three cells stack with a hairline between them. In a right-to-left layout the bars fill from the end and the cells run the other way, while the figures and days keep their reading order.

What moves, and what happens with reduced motion?

The header and the band fade up once on load and the percent rolls up when it comes into view. Both are CSS or the number's own roll, and both are off or instant with reduced motion.

All 200 changelog blocks