shadcn.io is not affiliated with official shadcn/ui
Feature Flags CRUD Block for React Aria
A flag service's list with a quick line that adds a kebab-case flag, an editable description, an owner and a switch that acts at once, where deleting an off flag takes one press and deleting a live flag needs a slide to confirm.
Installation
Overview
Let a team add, switch and retire flags, with delete friction that grows with the flag's reach, using this feature flag list for React with React Aria. A hairline frame with a plus mark on each corner holds a quick line, an Input where a key in kebab-case and Enter add a flag, off, at the head of the list (a key that exists is refused with That key exists under the field), and a frame of fixed height with seven flags that scrolls inside itself. Each row has a Switch that takes effect at once, the key in mono, a description that is an Editable (click it, Enter saves, Escape cancels), the owner as initials with the name for screen readers, and a trash button. Deleting an off flag is one press; deleting a flag that is on opens a Popover with a Slide To Confirm Button (the handle also confirms with Enter or Space), because the flag changes what every user sees. Every change, even a switch, can be undone from the foot. Add is the only Shine Button, and deleting the last flag shows an Empty state without the frame changing height. For flag consoles, release toggles and any list where some deletions matter more than others.
FAQ
How do I fill it with my flags?
Edit FLAGS. Each has an id, a kebab-case key, a description, an owner name and an on flag. The count in the idle sentence is derived from the list; new flags take their id from a counter held in state and are owned by the demo user in OWNER.
Why do some deletes need a slide?
A flag that is on is serving users, so removing it is a decision about everyone. The slide asks for a deliberate gesture without a second dialog, and the keyboard route is Enter or Space on the handle. An off flag affects nobody, so it goes in one press and the foot offers Undo. To change the rule, edit the flag.on check in the row.
What is checked when I add or edit a flag?
A key must be kebab-case (lowercase words joined by hyphens), at most 40 characters and not already used. A description cannot be empty and stops at 80 characters. A refused value keeps the saved one and says why under the field in a slot that is always there, so no row changes height.
Does Undo cover switches too?
Yes: every commit stores the list as it was, so Undo reverses the last switch, edit, add or delete. A newer change replaces it, so it never undoes something older than what the foot names. Nothing times out.