Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Rollback History Dashboard Block for React

Seven rollbacks grouped by month and filtered by reason, with the median and longest recovery worked out from the rows shown and a deployment diff, services and operator for the chosen one.

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

Review why a release was undone with this rollback panel for React with Base UI. A hairline frame with a plus mark on each corner lists seven Rewindry rollbacks as a timeline grouped by month, each row a radio button with the version and the version it fell back to, a reason word, an impact word and the day. A Toggle Group in the header filters by reason, with the count of each, and the line under the timeline works out "Median recovery 14 min, longest 38" from the rows shown. The chosen rollback opens a deployment diff of the typed configuration change that undid it with Diff Text, the services it touched as Badge chips and the operator's initials. It's built from Toggle Group, Diff Text, Badge, Avatar, Empty and Guides. For release engineering and post-incident reviews.

FAQ

How do I fill it with my rollbacks?

Edit ROLLBACKS: the two versions, the ISO day, the reason, the impact, the recovery minutes, the services, the operator's initials, the config file and the diff as an array of lines (a leading space, minus or plus). The months, the counts and the median come from those rows.

How is the median worked out?

From the recovery minutes of the rows shown. With an even number it is the mean of the two middle values, rounded. Filtering by a reason recalculates it and the longest.

How do I clear the reason filter?

Press the lit reason again. The toggle can be empty, which shows every rollback. A reason with no rollbacks would show an empty state in the same box, and the timeline keeps the height of all seven rows.

Why does the diff replay when I pick another rollback?

Each diff plays its changes line by line once. Under reduced motion it is simply there. Removed and added lines carry a sign and a hidden word for screen readers, and they are shaded, not coloured.

What stays local, and how do I wire it for real?

The history and diffs are typed and nothing is deployed. To wire it up, load rollbacks from your deploy log and return each one's before and after configuration as diff lines.

How does it look on a phone?

The reason buttons wrap, the diff scrolls sideways inside its band and the services wrap under it.

All 200 dashboard blocks