shadcn.io is not affiliated with official shadcn/ui
Release Channels Carousel Block for React
Three release channels as radio cards with a version chip, a date, stability in dots and words and install counts, beside an Installed cell whose Switch button opens a confirm that names the versions and the risk.
Installation
Overview
Let people choose how early they get updates, and make the switch a deliberate one, with this release channels carousel for React with Base UI. Stagewise, a desktop app's updater, offers three channels (Stable, Beta and Nightly). An Installed cell at the start says what you run now ("Stable 4.1.2"), what the chosen channel would move you to and the risk in words ("Built every night. Can break between builds."). The channels sit on a hairline track as radio cards: a version chip in mono, the release date, stability as four dots and a word, three notes and a compact install count. The cards are native radio buttons in one group and the track follows the choice. The block's one primary, "Switch to Beta" (Shine Button), opens an Alert Dialog that names both versions and the risk, with "Stay on Stable" first; confirming makes the channel the installed one and returns focus to the button. The foot holds the counter, a dot for each step and Previous and Next Buttons. Two cards show from the large breakpoint, one with the next peeking before that, and the Installed cell sits above the track on a phone. The ruled bands come from Guides. The app, the versions and the counts are made up for the example.
FAQ
Why does switching ask first?
Moving to an earlier channel can break a plugin or a document, so the button opens a confirm instead of switching at once. It names the versions you move between and the risk, puts "Stay on Stable" first and keeps focus on it. Escape and Cancel close it without changing anything and return focus to the Switch button.
What does the Installed cell show?
Three lines derived from the typed channels and your choice: what you run, what you would move to (or "No change" when they match) and the chosen channel's risk sentence. When the chosen channel is already installed the button is unavailable and answers "You already run Stable." if pressed.
How does it work with a keyboard?
The cards are a native radio group inside a fieldset: Tab enters it on the chosen card and the arrow keys move and choose; a card out of view brings the track to it. Previous and Next stay in the tab order at the ends and are marked as unavailable instead of disabled.
How is stability shown?
Four dots, as many filled as the channel is steady, plus a word (Steady, Mostly steady, Changing, Unstable) and a hidden "3 of 4", so it never relies on the dots alone and uses no colour.
What stays local in the demo?
All of it. The channels are typed in CHANNELS and the installed channel lives in state; the status line says "Switched to Beta in this demo. Nothing was installed." To wire it for real, read the installed channel and the available builds from your updater, and call it from the confirm's action.