shadcn.io is not affiliated with official shadcn/ui
Slider Rollout Runtime Flags Block for React
A feature flag with a slider from 0 to 100 percent that lights a hundred user dots and writes the config as JSON with a Copy button, a badge that says Off, Partial or Full, and the targeting rule as inline code.
Installation
Overview
A runtime feature flag for React with Base UI, written for Gateflag, a fictional feature-flag service. A split behind a divider that runs from the page's top rule. At the start, the title and a framed flag panel: the flag's name, a badge that says Off, Partial or Full (an icon and a word), a slider from 0 to 100 percent with its value, a hundred dots (one per user) that light up from the first as you drag, and the targeting rule as inline code. At the end, the config you would ship, written from the same number as formatted JSON in a focusable region (keys at full strength, values a step quieter), with a Copy button that tells screen readers when it has copied. The slider only redraws this block; nothing is changed anywhere. On a phone the dots sit under the slider and the config scrolls sideways. It's built from Slider, Badge, Copy Button and Guides, with your theme's tokens for every colour. The flag and its numbers are example data.
FAQ
How do I change the flag, the rule and the starting value?
Edit FLAG, RULE and START at the top of the file. linesOf writes the config's lines from the percentage, and the same lines are what Copy puts on the clipboard, so the code you see is the code you copy.
How do the dots stay accessible?
The hundred dots are one image with the text alternative "35 of 100 users are in the rollout", and the same sentence is visible under them. They are decoration for the slider, which has its own name and announces "35% of users".
How does the slider work with the keyboard?
The arrow keys change it by one percent, Page Up and Page Down by more, and Home and End jump to 0 (Off) and 100 (Full). The badge, the dots and the JSON change as you move.
The slider is named with aria-labelledby and its value text comes from getAriaValueText.
Related
- Pro
Feature Flag History Changelog
Deploys and rolloutsA framed table of flag changes with each state drawn as a switch and a word, a rollout bar with its share in words, and the audience rule in a popover.
- Pro
Flag Environment Matrix Changelog
Deploys and rolloutsA flag by environment table with a rollout share, a shape and a word in each cell, and a user id field that buckets the user and marks where they are in or out.
- Pro
Blue Green Swap Zero Downtime Deploy
Deploys and rolloutsA blue-green swap for a deploy tool: two environment cells with instance dots, a 0, 10, 50 and 100 percent traffic toggle that redraws the split bar, the dots and the phase list, and a fixed Downtime 0 s.
- Pro
Percentage Fill Region Rollout
Deploys and rolloutsSix regions as rail-to-rail rows whose own background fills to the rolled-out percentage, with latency, a state shape and word, an end date, and a traffic-weighted overall figure.
- Pro
Lanes With Gates Release Train
Deploys and rolloutsA release-train table: a lane per train, a column per station (Dev, Staging, Canary, Production), each cell a gate shape and word with a hover card of its checks, and the departure time at the end of the lane.
- Pro
Split Feature Flags Hero
Product windowsA split hero for a feature-flag service: the headline, a Shine Button and three ticks beside a narrow flags dashboard in a hairline frame, with environment tabs, rollout meters and a working switch on every flag.