shadcn.io is not affiliated with official shadcn/ui
Environment Promotion Ladder Changelog Block for React
A promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.
Installation
Overview
An environment-rollout changelog for React with Base UI, written for Ladderline, a fictional delivery platform. Four stages (Dev, Staging, Canary, Production) run as rows rail to rail under a band rule, joined by a hairline from rung to rung. A header counts from the data how many stages have passed v7.3.0 ("v7.3.0 has climbed 2 of 4 stages"). Each row names its stage with a shape (a filled square with a check once promoted, a half one while rolling out, an empty one while it waits) and a sentence that comes from the data ("Promoted", "25% of traffic", "v7.3.0 waits on 2 checks"), the version in mono, a rollout bar with its percentage and the time it has spent in the stage. A trigger says how many gates passed and opens that stage's gates in a Collapsible: each gate is a check or a clock and a word. The Canary row is open on load and any row can be open together. It's built from Guides, Collapsible and Progress, with CSS transitions for the entrance and your theme's tokens for every colour. For release dashboards and delivery pages. The stages are example data.
FAQ
How do I change the stages and gates?
Edit STAGES at the top of the file. A stage has a name, the version it runs, its rollout percentage, the minutes it has run that version and a list of gates, each a name, a note and whether it passed. The headline, the "3 of 4 gates passed" triggers, the sentences under the names and the times ("1 d 4 h") are computed from that data.
Why does Production show an older version?
Because v7.3.0 has not been promoted there yet. Production keeps running v7.2.4 at 100%, and its gates are the checks that v7.3.0 still has to pass, so its sentence reads "v7.3.0 waits on 2 checks". A stage is called promoted only when it runs the newest version at 100% with every gate passed.
How do the gate lists open?
Each row's trigger is a button with the count of passed gates; Enter or Space opens its list, and any number of rows can be open together. A closed list is inert, so its contents are out of reach of the keyboard on every library. Nothing is promoted: the block only shows state.
How are the states told apart without colour?
By shape and word: a filled square with a check for a promoted stage, a half-filled square for one rolling out, an empty square for one that waits; a check or a clock and the word "Passed" or "Waiting" for each gate. All of it is in the foreground colour.
How does it fit on a phone and in a right-to-left layout?
On a phone the version and the time share a line under the name, the bar and the trigger follow, and the gates open under the row. In a right-to-left layout the rung line, the half-filled square and the bars mirror while versions and times keep their reading order.
Related
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Canary Release Ramp Changelog
Deploys and rolloutsA split with a five-step canary ramp as buttons at the start and, at the end, the chosen step as canary against stable in two cells with a guard-rail bar.
- 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
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
Deployment Log Tabs Changelog
Deploys and rolloutsTabs by environment with counts over a framed table of deploys: environment, commit with Copy, message, deployer, a duration micro-bar and a status word.
- 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.