shadcn.io is not affiliated with official shadcn/ui
Canary Release Ramp Changelog Block for React
A 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.
Installation
Overview
A canary-release changelog for React with Base UI, written for Finchgate, a fictional release-orchestration tool. A split behind a divider runs from the spine's top rule. At the start, a header says how much traffic v3.8.0 serves (counted from the ramp) and the ramp itself: five steps (1, 5, 25, 50 and 100 percent) as an ordered list of buttons. The steps behind say how long they held, the current one says how long it has run and is marked "Current", the ones ahead say "Not reached". At the end, the chosen step as canary against stable in two cells on a shared hairline (error rate and p95 latency, each with an arrow, a sign and "lower is better"), and the guard-rail under them: a bar that draws the canary's error rate against the limit that rolls the release back. No guard-rail has tripped, so nothing takes a status colour. It's built from Guides and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For release pages that show a progressive rollout. The figures are example data.
FAQ
How do I change the ramp?
Edit the step constants at the top of the file (ONE, FIVE, CURRENT, HALF, FULL). A step has a percentage, the minutes it held, the canary's and stable's error rates (in errors per 10,000 requests) and p95 latency, and a state of done, current or ahead. The headline, the "held" texts, the signed differences and the guard-rail bar are computed from those numbers and from LIMIT_ERRORS.
What do the steps that were not reached show?
The same two cells with dashes where the numbers will be, "Not measured" in place of the change and a line saying there is nothing to check until traffic gets there. The cells keep their shape, so choosing a step you have not reached never moves the page.
When would the guard-rail show a status colour?
Only if it tripped. Here the canary's error rate stays under the limit at every measured step, so the bar is plain foreground and the text says "The guard-rail has not tripped". A real tripped state would be the one place for a status token.
How does the ramp work with the keyboard?
The steps are ordinary buttons in an ordered list, so Tab moves through them and Enter or Space chooses one; the chosen step is aria-pressed. A polite status line reads the numbers of the chosen step. Nothing is deployed or rolled back: choosing a step only redraws this block.
How does it fit on a phone and in a right-to-left layout?
On a phone the ramp comes first and the detail follows under a rule. In a right-to-left layout the chosen step's bar moves to the other edge, and percentages, error rates and milliseconds keep their reading order. Trend arrows keep their direction because they mean up or down, not forward.
Related
- 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.
- 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
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
Environment Promotion Ladder Changelog
Deploys and rolloutsA promotion ladder of four stages as rows with a rollout bar, time in stage and a Collapsible that lists each stage's gates.
- Pro
Slider Rollout Runtime Flags
Deploys and rolloutsA feature flag with a slider from 0 to 100 percent that lights a hundred user dots and writes the config as JSON with a Copy button, a badge that says Off, Partial or Full, and the targeting rule as inline code.
- Pro
Rollback History Changelog
Deploys and rolloutsA 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.