Countdown Timer

Component 3

About

Countdown Timer

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Countdown Timer to your project and fits it to your theme.

Code

How Countdown Timer is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"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>
  );
}