shadcn.io is not affiliated with official shadcn/ui
Feature Flags Onboarding Block for React Aria
A setup panel of five switches with a stage word (Stable, Beta or Labs) on each, two of them tied to Beta features so turning one on turns the gate on and turning the gate off turns them off, with a running count.
Installation
Overview
Let people choose how early they want to be with this feature-flags step for React with React Aria. It is a setup panel of Flaghurst, a release-control tool: five Switch rows on ruled lines, each with a stage beside the name (Stable, Beta or Labs) and one sentence. Impact preview and AI suggestions need Beta features: turning either on turns Beta features on and says so, and turning Beta features off turns both off and names them. A count at the top of the list reads “4 on, 2 in beta” and follows every change. Save is the one Shine Button and Discard goes back to what was saved; nothing is set anywhere.
FAQ
How do I change the flags?
Edit FLAGS. Each has an id, a name, a sentence, a stage (Stable, Beta or Labs) and needs, the id of the flag it depends on or an empty string. The gate is the flag named by GATE. Any number of flags can depend on it; the cascade is worked out from needs, so there is no second list to keep in step.
What happens when I turn something on or off?
Turning on a flag that needs the gate turns the gate on in the same move, and the status line says so (“Beta features is on too, because AI suggestions needs it.”). Turning the gate off turns off every dependent that was on and names them. Every other switch just reports its new state and the count.
What does “in beta” count?
Flags that are on and whose stage isn't Stable, so Beta and Labs both count. Change betaCount if you want them apart. The count sits in a reserved slot, so its digits changing never moves the list.
What do Save and Discard do?
Save keeps the switches as the saved state in the page and says how many changed; Discard puts them back. Both stay in the foot even with nothing to do and answer (“No changes to save.”) instead of disappearing. Nothing is sent anywhere.
What stays local in the demo, and how do I wire it?
All of it: the switches are state in the page and Save only says it saved. In your app send the changed flags to your release tool where save says so, and keep the dependency check on the server as well, because a script can skip the page.
Is it usable with a keyboard and a screen reader?
Yes. Each switch is named for its flag through the flag's name, so it reads “Audit trail, switch, on”. The stage and the dependency are text, never only colour or position, and the status line is the page's one polite announcement, so a cascade is spoken once.