shadcn.io is not affiliated with official shadcn/ui
Feature Flag Enabled Success Block for Solid
A confirmation panel for a feature flag that went live: a strip of figures over a rollout dial that moves by stops, an Environment switch, the number of users it reaches worked out from typed audiences, and a local Roll back.
Installation
Overview
Confirm that a flag is live and let people widen or narrow it, with this confirmation panel for Solid with Ark UI. It is the Flagwren page after a feature flag went on, as a panel under a compact header. Inside a hairline frame a strip of three figures names the flag's key, the share of users it is on for and how many users that is. Under it a Slider moves the rollout by stops (off, 1%, 5%, 10%, 25%, 50% and 100%) with a ruler under the track, an Environment Toggle Group switches between Production and Staging, and one sentence says what the dial amounts to ("About 3,100 of 12,400 users in Production see it"). A side cell holds the audience, the targeting rule, when it was enabled and who owns it. The foot has a status line, the one Shine Button, View analytics, and an outline Button, Roll back. Nothing is toggled: the audiences and rollouts are typed sample data. For flag, experiment and staged-release tools, or the page after any change that can be widened gradually.
FAQ
What stays in the page, and how do I wire it for real?
Nothing was toggled. The two audiences (12,400 users in Production, 380 in Staging), the starting rollouts (Production at 25%, Staging at 100%) and the people and dates are typed constants at the top of the file, and the dial only redraws the page. To wire it, read the flag from your flags API into ENVS and START, send the new stop from the slider's change handler (the polite status already waits until the dial rests, so you can send on the same beat), and put the error in the status line if the request fails. Roll back is a local move to 0% today: make it call your own rollback endpoint.
How does the dial move, and how does a screen reader hear it?
The slider's value is the stop's place, not a percentage: six steps that carry a ruler of seven labels spaced evenly, so 1% and 5% are not squeezed together. The arrow keys move one stop, Home and End go to 0% and 100%, and its value text is the stop's own words ("25%"). The sentence under the dial changes at once; the polite status line says the new reach about 600 milliseconds after the dial rests, so an arrow key held down does not read out every step.
What does the Environment switch change?
Each environment keeps its own rollout and has its own audience. Switching from Production to Staging moves the dial to Staging's stop, redraws the figures and the sentence from Staging's 380 users, and says so in the status line; switching back finds Production where you left it. The group always has one pressed item.
What does Roll back do?
It puts the open environment on 0%, draws the dial there and says "Production rolled back to 0%." in the status line. At 0% the button stays in place and keeps its focus, looks quiet, and answers a press with "Already at 0%. Nothing to roll back." instead of disappearing. Nothing is sent to a server in this demo.
Where do the user counts come from?
They are worked out from the environment's typed audience and the stop's share, rounded to a whole user, so 25% of 12,400 is 3,100. The text says "about" because real flag services assign users by hashing, which lands near the share but rarely on it. The strip, the sentence and the status line all come from the same helper, so they never disagree.