shadcn.io is not affiliated with official shadcn/ui
Feature Flags Dashboard Block for Solid
Eight feature flags with a switch for Dev, Staging and Production, a search field, a rollout slider for the chosen flag that works out how many users it reaches, and a confirmation before a flag that needs review goes live.
Installation
Overview
Control what is live with this feature flag dashboard for Solid with Ark UI. A hairline frame with a plus mark on each corner starts with a search field and lists eight Rolloutgate flags, each with its name, its key in mono, its owner and a Switch for Dev, Staging and Production, named for the flag and the environment. Pressing a flag's name selects it, and the rollout band below sets, with a Slider, what share of Production's 48,200 users it reaches and works out the number: "25% of 48,200 users is 12,050." Turning Production on for a flag marked Needs review opens an Alert Dialog with focus on Cancel; every other switch applies at once. It is built from Switch, Slider, Alert Dialog, Input, Badge and Guides, with no Shine Button because the switches apply at once. For teams that ship behind flags.
FAQ
How do I add a flag?
Add an object to FLAGS: an id, a title, a key, an owner, a description, whether it needs review, its rollout percent and the environments it starts on in. USERS is the number of Production users the blast radius is counted against, and the header counts come from the switches.
Why does one switch ask first?
A flag marked Needs review shouldn't reach Production without a second look, so turning it on there opens a dialog that says how many users it would reach at its rollout. Cancel (the default) leaves the switch off and returns focus to it; Turn on switches it on. Turning a flag off never asks. The dialog's initial focus option puts focus on Cancel.
What does the rollout slider do?
It sets the percentage of Production users who get the chosen flag, in steps of 5, and the sentence beside it works out the users from 48,200. If Production is off for that flag the sentence says so and shows what it would reach once it is on.
Does searching change the layout?
No. The search matches the name, key, owner and description, the list keeps its height so the rollout band doesn't jump, and a search with no match shows a short message with a Clear search button.