Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Migration Guide Changelog Block for React

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.

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 migration guide for React with Base UI, written for Movewright, a fictional API gateway, as a split whose hairline divider meets the top rule at a +. At the start sit the title, a sentence, a deadline tag ("Removed on Nov 30, 2026", a fixed time) and a running count, "2 of 4 steps done", with a progress bar that follows it. At the end, an ordered list of four steps runs rail to rail: each has its title, a sentence with the file or key in inline code, a Done checkbox and, for three of them, a Snippet button that opens the config in a labelled, focusable region with a Copy button. Ticking a step moves the count and the bar; Copy fills the clipboard and tells screen readers so. Nothing is saved: it is the demo's own state. On a phone the deadline and the count come first and the steps follow. It's built from Guides, Checkbox, Collapsible, Copy Button, Progress and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For API and platform migrations with a hard end date. The steps and files are example data.

FAQ

How do I change the steps?

Edit STEPS at the top of the file. A step has an id, a title, a detail (the sentence as parts: every second part is shown as inline code), a file name, a snippet (empty for a step with none) and startsDone. Change DEADLINE for the date in the tag. The count and the bar come from the list.

Are the ticks saved?

No. They are state in the page and reset on reload; two steps start ticked so both states are on view. To keep them, store the ticked ids or send them to your server from tick.

How is progress told to a screen reader?

The count ("2 of 4 steps done") sits in a polite status, so each tick is announced. The bar is decoration and hidden from assistive technology, because the sentence says the same thing. Each checkbox is named "Done" followed by its step's title.

What does Copy do?

It copies the snippet of that step exactly as shown and says "Copied the snippet for Switch to the v2 route table" in a polite status line, or that it couldn't copy. Nothing runs and no file is written.

How does it work with a keyboard?

Tab reaches each step's Snippet button and its Done checkbox in turn. Enter or Space opens a snippet or ticks a step. A closed snippet is out of the tab order; an open one adds its Copy button and a code region that scrolls with the arrow keys.

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

The deadline and the count come first, then the steps one under another with the Done checkbox below each sentence. Files, keys and snippets keep their left-to-right reading order in a right-to-left layout while the rest mirrors.

  • Pro

    Checklist Style Changelog

    Votes and sharing

    A "tried it" checklist of the six latest things a task board shipped: a real checkbox per feature with its version and day, a count in the header and a meter that fills as you tick.

  • Pro

    Rollback Wizard Changelog

    Deploys and rollouts

    A three-step rollback wizard in one framed window: pick a previous release, review what reverts and what stays, then type the version to unlock a Shine Button that opens an alert dialog and ends on a stated demo result.

  • Pro

    API Deprecation Timeline Changelog

    APIs and integrations

    A v2 API retired in four phases as read-only Steps in cells that share their hairlines, then a framed table of the five deprecated endpoints with a Copy button on each replacement.

  • Pro

    Breaking Changes Changelog

    APIs and integrations

    A framed table of four breaking calls: the old call in a del row, the new in an ins row, who it affects and the day to migrate by, with a codemod command in a terminal strip and a Copy button.

  • Pro

    Steps Chain Release Approval Flow

    Deploys and rollouts

    A release sign-off split: a summary of the release at the start, and a vertical approval chain at the end with people, states and times, an Approve button that advances it in the demo, a progress bar and a Deploy button that gives a stated demo result.

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

All 200 changelog blocks