shadcn.io is not affiliated with official shadcn/ui
Feature Flag Rollout Status Block for Radix UI
Five feature flags on staged ramps over ten days, planned against actual exposure, with the exposed group's error rate beside it, a state worked out for each flag and a filter by state.
Installation
Overview
See which feature flags are ramping, which are held and which stopped themselves, with this rollout panel for React with Radix UI. It is Flagramp, a feature-flag service (made up), showing five flags as rows. Each row has the flag name in mono, a step line over ten days (solid for the share of users exposed so far, dotted for the plan), a dot on today, and the guardrail beside it: the error rate of the exposed group against the group that is not exposed. The state is worked out rather than typed: past a 0.3 point limit a flag is Halted, a ramp that stopped short of its plan is Holding, anything else is Rolling out. A Toggle Group in the header filters the list by state without changing its height, and choosing a flag reads it and lists its four steps. Guides draw the frame and its bands; the entrance is CSS only. For release managers, on-call engineers and any team that ramps risky changes.
FAQ
How do I use my own flags?
Edit FLAGS: each has a plan of four steps (the day and the share of users), at, the day of the ramp it is on, freezeAt, the last day a planned step could still apply, and the two error rates. Exposure for a day is the last step on or before it, capped at freezeAt. The state, the numbers in the header and the step table are all derived. LIMIT is the guardrail in percentage points.
How is the state decided?
Halted wins: if the exposed group's error rate is more than 0.3 points above the other group's, the flag is Halted. Otherwise, if its exposure stopped growing before today, it is Holding. Anything else is Rolling out. The words are always shown next to the share, so the state never rests on a colour, and only a halted flag carries a status icon.
What does the filter do?
It shows only the flags in the chosen state. The list sits over an invisible copy of the whole list, so the panel keeps its height whichever state you pick. If the flag you were reading is filtered out, the first match is chosen and read.
What stays local?
Everything. No flag is turned on, off or ramped, and the rates are typed examples. To make it real, read the exposure per day and the two error rates from your flag service and metrics store, and keep the rest. Changing a flag belongs in your flag service's own controls.