shadcn.io is not affiliated with official shadcn/ui
Feature Flags Carousel Block for Radix UI
Six feature flags for a flag service on a swipeable track, each with a Switch for Development, Staging and Production and a rollout slider that works only while Production is on, over a derived count of what is on.
Installation
Overview
Put real controls inside a carousel without a swipe getting in their way, with this feature flags carousel for React with Radix UI. Switchwell, a feature-flag service, shows six flags (checkout-v2, ai-summaries, compact-sidebar, bulk-export, new-onboarding and usage-alerts) on one ruled track, two at a time from the medium breakpoint and one on a phone. Each slide has the flag's name in mono, a sentence, its owning team, the date it last changed, a Switch for Development, Staging and Production, and a rollout slider that works only while Production is on and says its value in words ("Rolled out to 40% of accounts"). A band above the track counts what is on in Production, Staging and Development from the flags themselves, and under it a foot band holds the status line, a dot for each step, and Previous and Next Buttons. The controls are no-drag zones, so moving the slider never swipes the track. The ruled bands come from Guides. Switchwell and the flags are made up for the example.
FAQ
How do I use my own flags?
Edit FLAGS. Each flag has an id, a sentence, an owner, a changed ISO date, one boolean per environment (dev, staging, prod) and a rollout percentage in steps of five. The counts above the track, the words under each slider and the slide names are all derived from that list, so nothing is typed twice. To add an environment, add it to ENVS and to the Flag type.
Why doesn't dragging a slider swipe the track?
Every control area is marked data-no-drag, and the track ignores a drag that starts inside one. A drag anywhere else on a slide still swipes it.
Embla's watchDrag option returns false for a drag that starts inside a data-no-drag box, and the controls take touch-action: pan-y.
Why is the slider greyed out?
A rollout only means something while the flag is on in Production, so the slider is disabled while that Switch is off and the line under it says "Off in Production, so no rollout". Turn Production on and the slider takes the value it had.
How does it work with a keyboard?
Tab reaches the Switches and the slider of the slides in view, then the dots, Previous and Next. Space flips a Switch, and the arrow keys move the slider, so the track itself is moved with the buttons and the dots. Slides that are out of view are hidden from the tab order and from screen readers, and each Switch is named with its flag ("checkout-v2, Production").