shadcn.io is not affiliated with official shadcn/ui
Rollback History Changelog Block for Ark UI
A 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.
Installation
Overview
A rollback history for React with Ark UI, written for Backstep, fictional deploy tooling. A compact header carries the title, one sentence and, at its end, a summary counted from the rows ("5 rollbacks in 90 days, median 6 min"). Under a band rule the table runs from rail to rail and ends the block, its rows divided by hairlines. Each row gives the day, the version it came from and the one it went back to (in mono, with an arrow), the reason as an outline badge with an icon and a word (Bad migration, Memory leak, Config), how long the revert took and how it ended. "Time to revert" is a header button: one press sorts fastest first, the next slowest first, and a third returns to newest first; the column carries aria-sort and an arrow, and a polite line reads the result. On a phone the reason is dropped and the table scrolls sideways in a labelled region with the day pinned at the start. It's built from Guides and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For deploy dashboards, release pages and incident reviews that show how reliable going back is. The rollbacks are example data.
FAQ
How do I change the rollbacks?
Edit ROLLBACKS at the top of the file, newest first. A rollback is an id, a date as an ISO day ("2026-09-09"), the from and to versions, a reason, the minutes the revert took and an ended phrase. The summary above the table ("5 rollbacks in 90 days, median 6 min") counts the rows and takes the median of their minutes, so it stays true when you edit. The day on screen 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.
How does the sort work?
Time to revert is a button inside its column header. The first press orders the rows fastest first, the second slowest first and the third returns them to newest first, so the table can always go back to its natural order. The header carries aria-sort ("ascending", "descending" or "none"), the arrow beside the label shows the direction, and a visually hidden polite line says what the table is now sorted by.
How are the reasons told apart without colour?
Each reason is an outline badge with an icon and the word: a database for a bad migration, a memory stick for a leak, sliders for a config change. A screen reader hears the word and skips the icon. The three reasons are constants at the top of the file, each an icon, an id and a label.
Why are the versions in mono and kept in order?
A version pair like "v3.9.0 to v3.8.2" has to read in the same order everywhere, so it is set in a monospaced run with an arrow between, and a visually hidden "back to" for screen readers. In a right-to-left layout the rest of the table mirrors while the pair stays in order.
How does it fit on a phone?
Below md the Reason column is dropped, and the table scrolls sideways inside a region that has a name and a focus ring, so a keyboard can scroll it. The day column stays pinned at the start with a hairline at its end, so every row keeps its date while you scroll. Nothing else on the page moves sideways at 320 pixels.