shadcn.io is not affiliated with official shadcn/ui
Pomodoro Task List Block for Radix UI
A pomodoro timer with a countdown ring and Start, Pause, Resume and Reset beside a task list that counts finished sessions as dots, with a session select that includes a 30-second demo.
Installation
Overview
Count focus sessions against real tasks, with this pomodoro to-do list block for React with Radix UI. At the start of the frame the Timer counts a session down inside a Circular Progress ring, with Start, Pause, Resume and Reset (only the one that applies shows; Start, Pause and Resume are the Shine Button) and a Native Select for the session: 25 minutes, 50 minutes, or a 30-second demo so you can watch one finish. At the end the task list marks the working task with aria-current, chosen by pressing its row, and shows each task's pomodoros as dots and "2 of 4" next to a Checkbox. A finished focus session adds a pomodoro to the working task and sets up the break, which waits for a press like everything else; nothing runs unless you start it. The frame is ruled by Guides. For focus timers, study apps and any task list that tracks effort.
FAQ
How do I load my own tasks and session lengths?
Replace START with your tasks, each with an id, a title, an est (pomodoros planned), pomos (finished) and a done flag, and edit SESSIONS for the lengths: a focusMs, a breakMs and a label. The select, the timer and the ring follow.
What stays local, and how do I save for real?
Everything. The timer runs in the page and the counts live in state, so they reset when you reload. In your app write the new count from finishSession to your own store; that is the one place a session counts.
How does the timer work?
It is the catalog Timer in countdown mode, started by pressing Start; it never starts by itself. It reports each tick, which drives the ring, and calls finishSession at zero. Choosing another session length, or finishing one, remounts the timer at the new length. Under reduced motion the ring stops animating and the digits still count.
What happens when a session ends?
A finished focus session adds one pomodoro to the working task, the status line says so, and the timer switches to the break length and waits for Start. When a break ends the timer switches back to a focus session. Ticking the working task done moves the mark to the next open task.
Is it accessible?
The digits and the ring are hidden from screen readers, which instead get a sentence naming the session and its length, and a polite status message when a session starts, pauses, resumes, resets or ends. The working task is marked with aria-current and a "Now" badge, so the mark is not color alone.