Clock Picker, animated React component

A time picker on a real clock face. Drag either hand: it trails your finger on a spring, the hour hand creeps as the minute hand goes round, and the numbers swell as a hand passes. Let go mid-spin and it coasts, then ticks into place. Wind past twelve and the AM/PM flap flips; the dial's sky follows the hour so night looks like night. Tap a number to jump the hour, or the minute track to set minutes. Keyboard: focus a hand and use the arrow keys (Page Up/Down for an hour, A/P for AM/PM).

Pro
Inputs & Controls
Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Alarm

Wake up

Rings in 9 hr 48 min

Props

Prop	Type	Default	What it does
defaultValue	string	"07:30"	Starting time, 24-hour "HH:MM".
step	number	5	Minutes the minute hand snaps to when you let go.
label	string	"Alarm"	Small line above the title.
title	string	"Wake up"	The title shown in the component.
countdown	boolean	true	Show "Rings in 7 hr 30 min" under the time.
sound	boolean	true	Soft watch ticks while the hands move (only after someone touches it).
onChange	(value: string) => void	—	Called with "HH:MM" (24-hour) once the hands settle.
autoplay	boolean	false	Plays a demo by itself until the first touch. Held still under reduced motion.
className	string	""	Extra classes for the outer element.

Add it to your project

1
Set up your project once
You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:
```
npx shadcn@latest init -d
```
Starting from nothing? The Quick Start walks through the whole thing.
2
Connect the registry with your API key
Clock Picker is a Pro item, so the CLI has to send your API key. Do this once per project:
1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
```
NEXUS_API_KEY=nxs_your_key_here
```
3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
```
"registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}
```

Clock Picker, animated React component

Play with it

Wake up

Props

Add it to your project

Set up your project once

Connect the registry with your API key

Add the component

Check what was added

Copying by hand? Skip the registry

Use it in a page

Clock Picker, animated React component

Play with it

Wake up

Props

Add it to your project

Set up your project once

Connect the registry with your API key

More inputs & controls