shadcn.io is not affiliated with official shadcn/ui
Release Countdown Changelog Block for React Aria
A countdown to the next release of a launch scheduler, in a split: a framed live countdown, the three scheduled changes as a numbered list with type tags, and a Remind me button that turns to Reminder set and back.
Installation
Overview
A release countdown changelog for React with React Aria, written for Tminus, a fictional launch scheduler. A split on a divider: at the end the heading, one sentence and the three changes scheduled for the next release as a numbered list, each with a type tag (an icon and a word: New, Improved, Fixed). At the start, in a frame with corner + marks, the countdown itself: the time remaining, counted in days, hours, minutes and seconds, with each digit dropping into place as it changes. It starts from a fixed 11 days when the page opens, and the caption says it is an example. Under it sits a Shine Button, Remind me, which turns to Reminder set when pressed and back when pressed again, with a line under it saying that nothing is sent. On a phone the heading comes first, then the countdown and its button, then the list. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Countdown Text, Shine Button, Badge and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For launch pages and release hubs that want the next release to feel close. The release, its changes and the countdown are example data.
FAQ
How do I point the countdown at a real release?
The countdown runs to target, which the block sets after the page opens as the moment it opened plus LEFT_MS (11 days and 6 hours), so the example never goes stale. For a real release, replace that line with your release's timestamp, an ISO string or a Date: the countdown then counts to that moment for everyone, and onComplete fires once when it reaches zero. Until the browser knows the time, an unseen placeholder holds the readout's width so nothing shifts.
What does Remind me do?
It changes the block's own state and nothing else. The button is a toggle: pressed, it reads Reminder set with a check, and a status line (a live region present from load) says that nothing is sent and the choice stays on this page; pressed again, it goes back. Both labels share one cell, so the button never changes width, and the line keeps its height. To make it real, send the choice to your backend from the handler.
How do I change the scheduled changes?
Edit SCHEDULED at the top of the file: each change has a kind (NEW, IMPROVED or FIXED, each an icon and a word), a title and a line. The list is numbered in the order they appear. Keep it to a few: this block is about the countdown, and the full list belongs in the release's own page.
How does it work with a keyboard and a screen reader?
The countdown is a time element that hands a screen reader the time remaining written out ("11 days, 6 hours, 4 minutes, 9 seconds") rather than the dropping digits, and the framed readout carries a caption. The changes are a real ordered list, each with an h3. Remind me is a button that says whether it is pressed; Tab reaches it and Space or Enter presses it.
How does it fit on a phone and in a right-to-left layout?
Below lg the split becomes one column in this order: the heading, the countdown frame with its button, then the list, with a rule between the parts. The readout shrinks to fit at 320 pixels and nothing scrolls sideways. In a right-to-left layout the split mirrors while the countdown keeps its left-to-right digits and the version stays left to right.