shadcn.io is not affiliated with official shadcn/ui
Deployment Rollback Notification Block for React Aria
One deployment of a service by environment: a segment group for Production, Staging and Preview, four read-only steps from Queued to Live, the commit in mono, and a Roll back that asks in an alert dialog and ends in a receipt with an Undo.
Installation
Overview
Show where a deploy stands and make the way back safe, with this deployment notification for React with React Aria. It is Pushbarge, a deployment service, in a hairline frame with a plus mark on each corner. A Segment Group picks the environment, Production, Staging or Preview, and the panel shows that environment's latest deploy: the commit message, a badge for its stage, four read-only Steps (Queued, Build, Deploy, Live) at the step it has reached, and a Data List in cells with the commit in mono, the branch, who pushed it and when. Roll back is an outline Button that opens an Alert Dialog naming the version it returns to, Cancel first and the action in a readable colour; confirming turns the row into "Rolled back to b92f0d3." with an Undo. A preview that is not live yet has nothing to roll back to and says so. Guides draw the lines. For deploy notices, release tools and any action that needs a way back.
FAQ
How do I fill it with my deploys?
Edit DEPLOYS: one per environment with a label, a title (the commit message), branch, short hash, who pushed it (by), an ISO at time, how many of the four STEPS it has reached and a previous deploy to return to, or null when there is none. AS_OF is the page's fixed now in UTC. In your app pass what your platform reports and take the rollback target from its history.
What really happens when I roll back?
Only this page changes: the environment's commit switches to the previous one, the badge says Rolled back and the status line says "Nothing was deployed in this demo." Undo puts the commit back. Each environment remembers its own state until you reload. In your app call your platform's rollback or promote endpoint from rollBack.
Why does it ask first?
A rollback changes what customers see, so it confirms in an alert dialog that names the version: it cannot be closed by clicking outside, first focus is on Cancel ("Keep e4c81a7") and the action text is mixed toward the foreground so it stays readable in every theme. Escape closes it and returns focus to Roll back. React Aria focuses Cancel through its own auto-focus.
Does the panel move when I change environment?
No. The facts of the three environments are stacked in one cell and the inactive ones are hidden and inert, and the action and its receipt share one cell too, so the frame keeps the height of the tallest.
Is it accessible?
The segment group is named by its heading, the steps are a list whose titles are hidden on a phone but still read, and the stage is also written as a badge. After confirming, focus moves to Undo; after Undo it returns to Roll back. A polite status line says each result. A Roll back that cannot run stays focusable and explains why.