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";
export default function TimerMinimal() {
return (
<div className="bg-white dark:bg-gray-800 w-full px-4 py-12 rounded-xl flex flex-col items-center">
<Timer.Root autoStart targetMs={5 * 60 * 1000} className="text-center">
<Timer.Area className="inline-flex text-xl font-mono text-gray-900 dark:text-gray-100">
<Timer.Item type="minutes" />
<Timer.Separator>:</Timer.Separator>
<Timer.Item type="seconds" />
</Timer.Area>
</Timer.Root>
</div>
);
}