Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

User Migration Changelog Block for React

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 Base 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.

  • Pro

    Data Migration Changelog

    Data and config

    Five backfill jobs in a framed table: records, duration and a status as an icon, a word, a progress bar and a percentage, with a total in the headline and a Retry button for the failed job.

  • Pro

    Database Migration Log Changelog

    Data and config

    Four migrations as a band of accordion rows, the newest open: each row shows its id, name, status as an icon and a word and its run time, and opens to the SQL with Up and Down tabs and a Copy button.

  • Pro

    Migration Guide Changelog

    APIs and integrations

    A split: a deadline tag and a running progress count at the start, four migration steps at the end, each with a Done checkbox and a copyable config snippet in a collapsible.

  • Pro

    Percentage Fill Region Rollout

    Deploys and rollouts

    Six regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.

  • Pro

    Environment Promotion Ladder Changelog

    Deploys and rollouts

    A promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.

  • Pro

    Canary Release Ramp Changelog

    Deploys and rollouts

    A split with a five-step canary ramp as buttons at the start and, at the end, the chosen step as canary against stable in two cells with a guard-rail bar.

All 200 changelog blocks