shadcn.io is not affiliated with official shadcn/ui
Rollback Wizard Changelog Block for React
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.
Installation
Overview
A rollback wizard for React with Base UI, written for Rewindly, a fictional deploy-undo tool. A centred header sits over one window, a card in a card, whose top band is the catalog's Steps, with the step names beside the numbers and numbers only on a phone. Step 1 picks the release to go back to from three choice cards, each with its version, day and one line. Step 2 reviews the impact as a list (migrations run backwards, flags switched off, config keys restored) and says what stays. Step 3 asks for the version to be typed; only then does the Shine Button "Roll back to v3.8.2" open an alert dialog, and confirming ends on a result that says "Rolled back in this demo". Nothing is changed and nothing is sent: Start over returns to step 1. Each step's heading takes focus when you move, a polite line says where you are, and the window keeps the height of its tallest step, so nothing jumps. It's built from Frame, Steps, Radio Group, Field, Input, Alert Dialog, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. For deploy dashboards, release pages and runbooks that make going back deliberate. The releases are example data.
FAQ
How do I change the releases and what a rollback does?
Edit RELEASES and CURRENT at the top of the file. A release is an id, a version, a date as an ISO day ("2026-08-28"), a one-line description and the counts it reverts: migrations, flags and keys. Step 2, the dialog and the result all read those counts, so choosing another release rewrites them. What stays is the STAYS list. The day on screen ("Aug 28, 2026") is spelled out from the ISO day by a small helper, so it reads the same on the server and in every browser. Dates are fixed, never computed from today.
Does anything really roll back?
No. Confirming only changes the page: the result says "Rolled back in this demo", and a polite line announces it. Wire the Roll back button's confirm handler to your deploy API to make it real. The window keeps no state beyond the page's memory, and Start over clears it.
Why type the version, and why a dialog as well?
Typing the version proves the person is looking at the release they mean, and the Shine Button stays disabled until it matches. The alert dialog is the last chance to stop: it says what the rollback would do and defaults to the safe choice, Keep the current version.
How do the steps work with the keyboard?
The step list is one tab stop and the arrow keys move between the steps you have already reached; later steps stay disabled until you get there. Moving to a step puts focus on its heading, so a screen reader starts reading where the content changed. Continue and Back are ordinary buttons.
How does it fit on a phone and in a right-to-left layout?
Below sm the steps show their numbers only (the names stay available to screen readers), and Back and Continue take the full width, stacked with the main action on top. Nothing scrolls sideways at 320 pixels. In a right-to-left layout the step list, the choice cards and the dialog mirror, and versions stay in reading order.
Related
- Pro
Rollback History Changelog
Deploys and rolloutsA table of rollbacks that runs rail to rail and ends the block: the day, the version it came from and the one restored, a reason badge, a sortable time to revert and how each ended, with a summary counted from the rows.
- Pro
Release Blockers Changelog
Deploys and rolloutsA verdict header counted from the data with a cleared bar, a toggle group (Open, Cleared, All) and an inset framed table of blockers with owners, states as shapes and words, and the day each was opened.
- Pro
Steps Chain Release Approval Flow
Deploys and rolloutsA 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
Post-Mortem Changelog
Incidents and uptimeA blameless post-mortem as one framed report: three impact cells, a five-whys accordion from the symptom to the root cause, and an action-items table with owners, due days and states beside a progress bar.
- Pro
Blue Green Swap Zero Downtime Deploy
Deploys and rolloutsA blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.
- Pro
Cancel Retention Billing
Upsell and retentionA cancel flow in three steps: a reason picker, an offer that matches it (half off for three months, or a pause), and a last page with the exact end date, each step taking focus and every outcome ending on a confirmation.