Components
Loading preview...
Countdown Timer
npx shadcn@latest add https://21st.dev/r/anubra266/countdown-timer"use client";
import { Timer } from "@ark-ui/react/timer";
import { Play, Square } from "lucide-react";
export default function TimerWithLabels() {
return (
<div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center">
<Timer.Root
targetMs={90 * 60 * 1000}
className="flex flex-col items-center gap-4"
>
<h3 className="text-lg font-medium text-gray-900 dark:text-gray-100">
Study Session
</h3>
<Timer.Area className="flex items-center gap-4 text-gray-900 dark:text-gray-100">
<div className="flex flex-col items-center">
<Timer.Item
type="hours"
className="text-2xl font-mono min-w-[2ch] text-center"
/>
<span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Hours
</span>
</div>
<div className="flex flex-col items-center">
<Timer.Item
type="minutes"
className="text-2xl font-mono min-w-[2ch] text-center"
/>
<span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Minutes
</span>
</div>
<div className="flex flex-col items-center">
<Timer.Item
type="seconds"
className="text-2xl font-mono min-w-[2ch] text-center"
/>
<span className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Seconds
</span>
</div>
</Timer.Area>
<Timer.Control className="flex gap-2">
<Timer.ActionTrigger
action="start"
className="flex items-center gap-1 px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors text-sm font-medium"
>
<Play className="w-4 h-4" />
Start
</Timer.ActionTrigger>
<Timer.ActionTrigger
action="pause"
className="flex items-center gap-1 px-4 py-2 bg-orange-500 text-white rounded-lg hover:bg-orange-600 transition-colors text-sm font-medium"
>
<Square className="w-4 h-4" />
Stop
</Timer.ActionTrigger>
</Timer.Control>
</Timer.Root>
</div>
);
}