Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Canary Release Ramp Changelog Block for React Aria

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.

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

A canary-release changelog for React with React Aria, 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.

What moves, and what happens with reduced motion?

The two cells of the split fade up once on load, with CSS transitions. With reduced motion they are off. Choosing a step swaps the numbers at once.

All 200 changelog blocks