Alarm Clock

Component 15

About

An iOS-style alarm clock widget showing the current time, a countdown to the next alarm, and a list of toggleable alarms with an add-alarm sheet (wheel time pickers) and a ringing dialog with snooze/stop.

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

Code

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

Usage.tsx

import AlarmClock from "@/components/ui/alarm-clock";

export default function AlarmClockDemo() {
  return (
    <div
      className="flex min-h-screen w-full items-center justify-center p-6"
      style={{ background: "var(--ui-bg)" }}
    >
      <AlarmClock
        alarms={[
          { id: "1", time: "07:00", label: "Wake up", on: true, snooze: true },
          { id: "2", time: "09:30", label: "Standup", on: true, snooze: true },
          {
            id: "3",
            time: "22:00",
            label: "Wind down",
            on: false,
            snooze: true,
          },
        ]}
      />
    </div>
  );
}