shadcn.io is not affiliated with official shadcn/ui
Countdown Timer Calendar Block for React
Five dates in order, each with a Pin toggle, and a large card for the pinned one that counts down in days, hours, minutes and seconds with a Pause button, plus a control that re-states every count in days, working days or weeks.
Installation
Overview
Give a date a clock people can watch, with this countdown timer for React with Base UI. It is a screen of Notchby, an event countdown tool, in a hairline frame with a plus mark on each corner: the large card at the start counts down to the pinned date in days, hours, minutes and seconds, names the event with its day, time and place, and shows a Progress bar for how far the date is from the day it was announced ("62 percent of the way from the announcement"). A Pause button stops the clock and a mark beside it says whether it is counting or paused; under reduced motion the clock starts paused. At the end, five dates sit in order of what is nearest, each with a Toggle that pins it, and a Toggle Group re-states every count as days, working days (Monday to Friday) or weeks. Unpin the date and the card shows an Empty state of the same size. The clock starts at 14 October 2026, 09:30 UTC, and runs from there. For launches, events, deadlines and any app that counts toward a date.
FAQ
How do I change the dates?
Edit EVENTS. Each has an id, a name, a place, a start moment in UTC (an ISO string ending in Z) and the day it was announced, which sets the progress bar. Keep them nearest first; the list shows them in that order. AS_OF is the moment the clock starts from.
Does it use the real time?
No. The clock starts at the fixed AS_OF and adds one second for each second the page is open, so the figures are the same on any day and in a screenshot. To follow the real time, set AS_OF from your server's clock when the page is built and keep the rest as it is. The list's counts are worked out from the date of AS_OF and do not tick.
How does the pause work, and what about reduced motion?
The clock is one timer that runs only while the Pause button says Pause; Resume starts it again, and the mark beside the button changes from a pulsing dot to a hollow ring. If the reader has asked for reduced motion the clock starts paused, the dot does not pulse, and a polite status message says so, so nothing moves until they press Resume. The ticking figures are hidden from screen readers; a sentence under the heading gives the days, hours and minutes to go when you read it.
How are working days and weeks counted?
Working days are the Monday to Friday days after today up to and including the date; the block knows no holidays. Weeks are whole weeks and the days that remain, such as "1 week, 3 days". Days are the difference in calendar dates. The card repeats the choice in a line under its figures.