Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Canary Deployments Dashboard Block for Solid

Five metric gates comparing a canary with its baseline, each with an editable allowed change and a pass or over result, a verdict, and a four-stage traffic strip that Promote and Roll back move.

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.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Decide whether a release is safe to widen with this canary judge for Solid with Ark UI. A hairline frame with a plus mark on each corner lists five Firedamp gates for release 2.41.0 of the orders service: error rate, p50 latency, p99 latency, CPU saturation and 5xx responses. Each row shows the baseline, the canary's reading at its current traffic, the change between them, an allowed change in a Number Input and a result as a glyph and a word, Pass or Over. Under it a read-only Steps strip marks the traffic stage: 5, 25, 50 and 100%. The foot says the verdict, "Promote recommended" only when every gate passes, and holds a Shine Button that promotes one stage and a Roll back Button. While a gate is over, Promote answers with the gates that hold it. It is built from Number Input, Steps, Shine Button, Button and Guides. For progressive delivery tools and release reviews.

FAQ

How do I use my own gates?

Edit GATES: a name, a baseline, the canary readings for the 5, 25, 50 and 100% stages, the number of decimals, a unit and the allowed change to start with. The change is worked out as the percentage difference from the baseline, and a gate is over when it is above the allowed change.

What does the allowed change do?

It sets how far a metric may drift from the baseline, in percent, before its gate is over. Raise it and a failing gate can pass; lower it to 0 and any increase fails. Each stage has its own readings, so the 50% stage fails four gates at the starting limits even though the 25% stage passes all of them. The result updates as you type.

Why does Promote sometimes refuse?

While any gate is over, Promote doesn't move the stage. It stays focusable, is marked as unavailable, and when pressed it says which gates hold it in the status line. At 100% there is nothing more to promote. After a roll back the same button reads Restart at 5%.

What stays local in the demo?

Everything. The readings are typed, the stage and the allowed changes live in the page, and Promote and Roll back change that state only and say so. In your app call your delivery system from promote and rollBack, and feed GATES from your metrics.

How is state shown without colour?

A glyph and a word on every gate, a bolder row when it is over, a filled marker for each stage reached on the strip, and a sentence for the verdict. Nothing relies on colour alone, and the primary colour appears only on the Promote button.

How does it look on a phone?

Each gate becomes a short block: its name and result on the first line, the baseline, canary and change on the second, and the allowed field full width under them. The foot sticks to the bottom of the screen with both buttons.