shadcn.io is not affiliated with official shadcn/ui
Release Countdown Changelog Block for React
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 Base UI, 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.
Related
- Pro
Release Banner Changelog
Spotlights and mediaOne release of a documentation platform on one screen: the version large with its day and highlight beside the command that upgrades to it with a Copy button, and a three-cell band of the changes in it, each with a type tag.
- Pro
What's Next Changelog
Roadmap and customersA stage ladder for a design collaboration tool: five upcoming features as rows rail to rail, each with a four-stop meter filled to its stage, its target quarter and a Notify me toggle that turns to Notifying and back.
- Pro
Roadmap Preview Changelog
Roadmap and customersA roadmap for a planning tool: an accordion of three themes whose rows count their items by stage and open to a list with a stage and a target quarter, beside a framed Now building card with a progress bar, owners and a target.
- 6d 22hPro
Trial Countdown Banner
CountdownsA trial notice for a writing app: a clock, a sentence with the time left ticking, a line on what upgrading keeps, a Shine Button to upgrade and a dismiss button that folds the block away.
- 02041158Pro
Event Countdown Banner
CountdownsAn event countdown for a developer conference: a calendar tile with the name and a sentence saying when it starts, four cells of days, hours, minutes and seconds in a corner-marked frame, and a Shine Button to reserve a seat.
- Pro
A launch countdown for a product event, with days, hours, minutes and seconds in one band, a pause control, and a registration bar for seats still open.