shadcn.io is not affiliated with official shadcn/ui
Scoreboard Split Flap Display Features Block for Radix UI
A release board in the style of a departures board: six features with a status flap, a region and a time, rolling over one row at a time, on a panel that inverts with the theme, with a Pause toggle.
Installation
Overview
A release board for React with Radix UI. A centred header says "Every release, on one board", and under it a framed figure (its lines run past the corners with + marks) holds a panel in the foreground colour with background-coloured type, so it is dark on a light page and light on a dark one with no dark scope. A "Live" light and a "Pause board" toggle sit above a table of six features: the feature, a status flap (planned, beta, rolling or shipped) with a split across its middle, its region and when. Every few seconds one row flips to its next stage and its flap and time roll over one character after another, and a Shine Button and an outline button sit under the board. It's built from Guides, Rolling Text, Status, Toggle, Shine Button and Button, with a timer that ticks one row at a time.
FAQ
How do I use my own releases?
Edit RELEASES (a feature, a region and the stage it is in when the board loads) and STAGES (the label and the time words of each stage, in the order a release goes through them). The board is read from a single tick count: flipsOf says how many times a row has flipped, and stageOf turns that into a stage, so no row's stage is stored. To drive it from real data, replace the tick with your own stages and keep the rows.
What moves, and what happens with reduced motion?
Every 3.2 seconds one row (top to bottom, then round again) flips to its next stage, and its flap and its time roll over one character after another. With reduced motion the board starts still and the light says "Paused"; it only moves if the visitor presses the toggle, which then reads as pressed in reverse. Rolling Text itself stands still under reduced motion.
How does a visitor stop it?
With the "Pause board" toggle on the panel: it is a real toggle button, pressed while the board is paused, and the light beside it changes from "Live" to "Paused". Nothing else moves on its own, apart from the pulse of the light, which also stops.
Why is the panel dark on a light page?
The panel is bg-foreground with text-background, so it takes the opposite of whatever the page is: the strong contrast of a departures board comes from the theme's own tokens, not from a forced dark scope. In a dark theme it turns light, and every tone on it is the page's background at a lower strength, so it stays readable in any preset.
How is the board made accessible?
It is a real table with a caption, column headings and a row heading for each feature. Each flap's word is real text read by Rolling Text's unseen copy, so a screen reader hears "Beta" or "Shipped" and not a stream of letters. The board is not a live region, because a flip every few seconds would be noise; the Pause toggle is there for anyone who wants it still.