shadcn.io is not affiliated with official shadcn/ui
Feature Flags By Environment Toggle Form Block for Vue
Six feature flags per environment: a Development, Staging and Production control swaps the list, changed flags are marked and counted, a Production change needs a note before it saves, and Copy as JSON copies the flags.
Installation
Overview
Ship a flag change with a reason with this feature flags form for Vue with Ark UI. A compact header holds a Segment Group of Development, Staging and Production over a hairline frame with a plus mark on each corner. Choosing an environment swaps the whole list to that environment's typed state: six flags, each a Switch, a title, a code key such as new-checkout and a sentence. A flag that differs from what is saved is marked "Changed" and counted in the band ("3 of 6 on, 1 changed"). Change anything in Production and the note field at the foot of the list, which is always there, switches on and asks why; Save refuses without a few words, names the problem in the status line and focuses the field. "Copy as JSON" puts the viewed environment's flags on the clipboard. Save keeps every environment together and Discard puts them all back. It's built from Segment Group, Switch, Badge, Textarea, Field, Button, Shine Button and Guides, with a CSS entrance only. For feature-flag consoles, release toggles, admin tools and any change that deserves an audit-log reason.
FAQ
How do I change the flags and environments?
FLAGS lists the flags (a key, a name and a sentence) and START lists which keys are on in each environment. ENVIRONMENTS names the three; to add a fourth, add it to that list, to Flags and to keysOf and withFlag. Counts and the "Changed" marks are derived by comparing the draft with the saved state.
Why does Production need a note?
Because it is the environment where a mistake costs customers. The note field is always rendered so that nothing shifts when a Production flag changes; it is disabled until one does, then required. The rule is NOTE_MIN letters; change the constant or the check in noteProblem. The note is cleared after a successful Save.
What does Copy as JSON copy?
The viewed environment as { "environment": "staging", "flags": { "new-checkout": true, ... } }, with the draft's values, so you can paste it into a config or a ticket. If the browser refuses the clipboard the status line says so instead of claiming success.
How does it look on a phone?
The environment control drops under the sentence at full width with three equal choices. Rows stack their sentence under the title and key, the note field sits under the list, and the foot is pinned to the bottom of the screen.