shadcn.io is not affiliated with official shadcn/ui
Countdown Timer Dialog Block for React
A tea shop's shelf with its tea timer shown open: Green, Oolong, Black and Custom brew times, a ring that fills with the digits inside it, Start, Pause, Resume and Reset, and a Tea is ready message when the time is up.
Installation
Overview
Time a brew from a button, with this countdown timer dialog for React with Base UI. It opens from the Teas shelf of Brewmark, a tea timer: the page's header holds an outline Start timer Button, and the shelf, one tea card with a chip that says what the clock is doing and two quiet cards, is drawn under a soft scrim inside a hairline frame with a plus mark on each corner. The Dialog has a Toggle Group of Green 2:00, Oolong 3:00, Black 4:00 and Custom, a Circular Progress ring that fills as the time runs with the digits inside it, Start and Pause in one place beside Reset, and two Number Inputs for a custom time in minutes and seconds. The clock is the catalog Timer, kept out of sight, so it keeps counting when the dialog closes and the chip on the card follows it. Nothing runs until Start is pressed, and when the time is up the dialog says "Tea is ready" once. Start is the only Shine Button. For preview the dialog is drawn open in place when the page loads, its clock stopped at 2:00.
FAQ
Why is the dialog already open, and why is the clock stopped?
So you can see it without a click, and so a poster or a gallery card never ages. On load the dialog is a copy drawn in place over the page: a native dialog element that isn't modal, so nothing is trapped, hidden or focused. In it the clock stands at 2:00 until you press Start, and then it really runs. The Start timer button in the header opens the real Dialog, modal, with its focus trap, Escape and focus return, and the copy stays closed until a reload. Both show the same BrewFields component and share the block's state, including a clock that is already running. In your app keep the Dialog and drop the copy: the "in-place" state, the scrim and the dialog element inside the frame.
How does the clock work, and can it be paused?
The Timer counts down from the brew time and reports each tick, and the ring and the digits follow it. Start begins it, Pause stops it where it is, Resume carries on from there, and Reset puts the brew time back and leaves it stopped. Picking another tea stops the clock and loads that tea's time. When it reaches zero the clock stops by itself, the ring is full, and "Tea is ready." appears once as an alert. Pause is a real button, and under reduced motion the digits still change, since they are the information.
How does the custom time work?
Choose Custom, then type minutes and seconds: the fields are only live while that tea is chosen and the clock is stopped. A time must be between 0:10 and 30:00 with seconds from 0 to 59; anything else says so under the fields and Start refuses and moves focus to the minutes field instead of running. A usable time becomes the stopped clock as you type.
What does a screen reader hear?
The ring is decoration and the digits are plain text you can read whenever you like, so nothing speaks every second. A polite status speaks when you choose a tea, start, pause, resume or reset, and the ready message is an alert, read once when the time is up. After a press that swaps Start for Pause, focus moves to the button that took its place.
What stays local, and how do I wire it for real?
Everything. No sound plays, which is why the description says so, and nothing is stored: the chip on the shelf, the clock and the custom time live in this page's state. In your app play a sound or send a notification from the finish handler, and keep the teas and their times in your own data.
How does it look on a phone?
The copy shown on load docks to the foot of the frame as a bottom sheet with its Done button pinned and the content scrolling above it; the four teas share the row, with the name over the time. The real dialog keeps the Dialog's own phone layout, a sheet from the bottom that scrolls inside itself.