shadcn.io is not affiliated with official shadcn/ui
Feature Flags Table Block for React Aria
A flag-by-environment grid of switches for Dev, Staging and Production, where turning a flag on in Production opens a confirm dialog, a Production switch that differs from Staging says so in words, and each head counts what is on.
Installation
Overview
Make the risky switch ask first, with this feature flag table for React with React Aria. A compact header names the table. Inside a hairline frame with a plus mark on each corner, a line says that Production asks first, then a native table lists six Flaggery flags with a Switch for Dev, Staging and Production and an owner. Dev and Staging toggle directly. Turning a flag on in Production opens an Alert Dialog, "Turn on checkout-v2 in Production?", with Cancel focused first and Turn on; whichever way it closes, focus goes back to the switch. Turning one off in Production does not ask. Where Production disagrees with Staging, the cell says "Differs from Staging" in words, in a line that is always there so no row changes height, and each head counts how many flags are on. A polite line says what each change did. On a phone the three switch columns stay and the owner moves under the flag's key. It is built from Switch, Alert Dialog, Badge and Guides. For flag consoles, release tools and any control that is cheap in one place and costly in another.
FAQ
How do I use my own flags and environments?
Edit FLAGS (a key, a short note and an owner), ENVIRONMENTS and START, the list of flag and environment pairs that begin on. The confirm is tied to the environment id prod in flip; point it at any environment you want to guard, or at several.
Why does only turning on ask?
Because it is the step that exposes users; turning a flag off in Production is the way back and should never be slowed down. Change flip if your team wants a confirmation for both. The dialog is an alert dialog: it does not close on an outside click, its first focus is Cancel, and the action is a plain button because turning a flag on is not destructive.
What does Differs from Staging mean?
That the flag is on in one of the two and off in the other, a sign the change has not been promoted (or has been rolled back). It is a sentence, not a colour, and the line is always present, hidden when the two agree, so toggling never moves the rows.
Is it keyboard and screen reader friendly?
Every switch is named by its flag and environment ("checkout-v2 in Production"), the dialog traps focus and Escape cancels it. Focus returns to the Production switch after Cancel, Escape or Turn on, and one polite line reports the result. React Aria focuses the dialog itself a moment after it opens, so a small effect puts focus on Cancel.