Skip to content
shadcn.io

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

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.

What moves, and what happens with reduced motion?

The countdown ticks once a second, and each digit that changes drops into its window. With reduced motion the digits change in place; the entrance fade is off too. Nothing else loops, and the countdown stops at zero.

  • Pro

    Release Banner Changelog

    Spotlights and media

    One 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 customers

    A 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 customers

    A 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.

  • Pro

    A 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.

  • Pro

    An 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.