Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Changelog blocks

Pro

Slider Rollout Runtime Flags Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A runtime feature flag for Solid with Ark 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's value text comes from getAriaValueText, and its label is part of the slider.

Why does the same person stay in or out as I move the slider?

The config says users are bucketed by user_id, so a person's place in the first N dots never changes: the lit dots only grow or shrink from the first one. The block draws that idea; it doesn't evaluate anything.

What changes on a phone?

The two halves stack with a rule between, the dots take ten across and the JSON region scrolls sideways with a visible focus ring. In a right-to-left layout the labels mirror while the dots and the code keep their direction.

All 200 changelog blocks