shadcn.io is not affiliated with official shadcn/ui
Countdown Segment Stats Block for Radix UI
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.
Installation
Overview
A countdown stat for React with Radix UI. A short centred header for Stagewick, a product-launch event, says how many seats are still open ("188 seats open for the keynote"). Under it, a ghost button pauses the clock, and a registration bar shows 4,812 of 5,000 seats taken. The block then ends on a band of four labelled segments, days, hours, minutes and seconds, that come from one timer. The duration is fixed: 11 days, 6 hours and 42 minutes from the moment the page opens. Pausing freezes the time still left; resuming continues it. Two by two on a phone. It's Timer, Progress and Guides.
FAQ
When does the clock start, and when does it stop?
The length is the constant START (11 days, 6 hours and 42 minutes), turned into DURATION_MS, and the catalog timer counts it down from the moment the page opens in the browser. Until it mounts, the cells show the starting digits. It reaches zero only at the target and then stops. There is no calendar date in the file, so the copy never goes stale, and the sentence under the heading is written from the same constant.
What does pausing do?
The button is a timer action trigger: it reads "Pause countdown", then "Resume countdown", and each press pauses or resumes the same timer, so the seconds still left are kept. The label sits over an unseen copy of the longer one, so the button never changes width when it flips. A polite status, empty until the first press, announces "Countdown paused" or "Countdown running". Nothing is saved: a reload starts the clock again.
Why do four cells share one readout?
Days, hours, minutes and seconds are one countdown, not four clocks. The timer area holds a list of four cells, and each cell reads its own part (days, hours, minutes, seconds) from the same timer. The phone uses the same four parts in a two-by-two grid.
How is registration counted?
REGISTERED is 4,812 and CAPACITY is 5,000. Seats still open are the difference, 188, which is the heading and the line beside the bar. The bar's value is the registered share of capacity, rounded: 96%. Edit the two constants and the heading, the line and the bar all change together.
Is the countdown accessible?
Yes. The timer area is named with the whole time left ("11 days, 6 hours, 42 minutes and 0 seconds to the keynote") and is not a live region, so the ticking digits are not announced every second. The cells keep their labels in the text, and the digits are kept in one direction. The pause button announces its change through the polite status.
The bar takes an aria-label.
What moves, and how does it fit on a phone?
The header and the band fade up once, and nothing else is animated: the digits change in place each second, with or without reduced motion. Pausing stops the ticking entirely. The four segments sit in a row from a small screen up, and two by two below that, divided by hairlines that don't add to the row height. Nothing scrolls sideways at 320 pixels. The band ends the block, so there is no rule under it: the next section's top rule closes it.