shadcn.io is not affiliated with official shadcn/ui
Steps Chain Release Approval Flow Block for React
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.
Installation
Overview
A release approval flow for React with Base UI, written for Cosignly, a fictional release sign-off tool. A split behind a divider that runs from the page's top rule: at the start the title and a ruled list of the release (version, changes, deploy window, rollback plan); at the end the approval chain, drawn with the catalog's vertical Steps: Author, Peer review, Security review and Release manager, each with an initials avatar, a person, what they check, a state in words and a time. A bar counts "2 of 4 approved". The current stage has an Approve button; pressing it advances the chain, moves focus to the next action and announces it, and the stage reads "Approved in this demo" because nothing leaves the page. Once the last stage is approved the one Shine Button, "Deploy v4.2.0", appears; pressing it says "Deploy of v4.2.0 queued in this demo. Nothing was shipped." and a ghost button resets the demo. On a phone the summary comes first, ruled from the chain. It's built from Steps, Avatar, Progress, Button and Shine Button, with your theme's tokens for every colour. The people, times and release are example data.
FAQ
How do I change the chain and the people?
Edit STAGES (an id, a title, a person with initials, what the stage checks and the time it was approved, empty until then), START (how many were approved when the page loads) and FACTS (the release summary) at the top of the file. The bar, the states and the sentences are derived from the number approved.
What do Approve and Deploy really do?
Nothing outside the page. Approve changes the block's own state, and the stage then says "Approved in this demo"; Deploy only shows a stated result ("queued in this demo"). Wire approve and deploy to your own API to make them real; keep the same live announcements.
Where does focus go after I press Approve?
Pressing a button removes it, so focus moves to the next action: the following stage's Approve button, then Deploy, then, after Deploy, the Reset button. A polite status line reads the result for screen readers.
Related
- 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
Review Checklist Changelog
Deploys and rolloutsA pre-release checklist as a split: a progress summary and a Ship button that stays disabled until all 14 checks are ticked, beside four accordion categories of real checkboxes with owners and Blocker badges.
- Pro
Rollback Wizard Changelog
Deploys and rolloutsA 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
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
- Pro
Release Countdown Changelog
Spotlights and mediaA countdown to the next release of a launch scheduler, in a split: a framed live countdown, the three scheduled changes as a numbered list with type tags, and a Remind me button that turns to Reminder set and back.
- Pro
Pull Request Changelog
Code and commitsFive pull requests as an ordered list rail to rail: number, title, author, a diff size with five squares (solid for added lines, hollow for removed), a state with an icon and a word, and a button that copies the checkout command.