shadcn.io is not affiliated with official shadcn/ui
Mobile Release Notes Changelog Block for Radix UI
Two lanes that run rail to rail, one per platform, drawing each store's review steps as read-only Steps with a staged rollout bar, and a band listing what the release contains.
Installation
Overview
A store review tracker for React with Radix UI, written for Handset, a fictional travel app. A compact header carries the title, one sentence and, at its end, a two-way control for the release (8.4.0 or 8.3.2). Under a band rule, two lanes run from rail to rail, one per platform. Each lane has the platform, its build number and its state in a word (In review, Staged 20%, Live), and the catalog's Steps drawn read-only: iOS goes Submitted, In review, Approved, Live; Android goes Uploaded, In review, Staged, Live, with a bar for how much of the users the staged rollout has reached. A band under the lanes ends the block with what the release contains, as a list with the day it was submitted. Choosing a release redraws the steps, the bar and the notes and moves nothing. On a phone the four steps stay in a row and the lane's facts sit above them. It's built from Guides, Badge, Progress, Segment Group and Steps, with CSS transitions for the entrance and your theme's tokens for every colour. For mobile teams who want a release page that says where each store has got to. The states are example data, and nothing is read from a store.
FAQ
How do I change the releases and lanes?
Edit RELEASES at the top of the file. A release has a version, an ISO submitted day, notes and two lanes. A lane has the platform name, its build number, the step labels in order, reached (how many steps are done: the next one is current, and all four means live) and staged, the percent of users reached, or 0 for a store with no staged rollout. The state word beside a lane is taken from the step it is on.
Are the steps interactive?
No. They are the catalog's Steps drawn read-only: a list of four numbered markers on a hairline, the done ones filled and the current one with a halo, and the current step marked with aria-current="step". Each title carries a hidden word (Done, Now, Next), so the state never depends on the fill. Nothing in a lane is a button.
How does picking a release work?
The two choices are a segmented control that always keeps one selected. Choosing one redraws the lanes, the rollout bar and the notes, and a visually hidden polite line reads the new states. The page does not move: the lanes always have four steps, and the notes of every release sit unseen in the same cell so the band keeps the height of the tallest.
What does the staged rollout bar show?
The share of users a staged release has reached, for the one store that stages it. The bar is a progress bar in foreground tones, and the percent is written beside it, so the figure never depends on the fill. When a release is live for everyone the bar reads 100%.