Back to components
Playground

Component

Pomodoro

Simple pomodoro component that manages the standard work/break cycle.

Cycle: 0
Work
25:00Focus Time

Usage Examples

Default (25m / 5m)

Cycle: 0
Work
25:00Focus Time

Short Work / Long Break (15m / 10m)

Cycle: 0
Work
15:00Focus Time

Long Work / Short Break (45m / 15m)

Cycle: 0
Work
45:00Focus Time

Experimental (20m / 3m)

Cycle: 0
Work
20:00Focus Time
"use client";

import { Pomodoro } from "@/components/pomodoro";

export default function Example() {
  return (
    <Pomodoro
      workDuration={25 * 60}
      breakDuration={5 * 60}
      className="max-w-md"
    />
  );
}