A time picker with an analog dial: drag the hand to the hour and it moves on to minutes, which snap to a step. A large readout, an AM and PM switch and full keyboard control sit beside it.
Pickup at Ember & Olive
Drag to set the hour
npx shadcn@latest add https://hyperblur.dev/r/input-time-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/input-time-picker.tsx.
import { InputTimePicker } from "@/components/hyperblur/input-time-picker"
<InputTimePicker defaultValue="18:30" step={15} onChange={(t) => console.log(t)} />| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | "Start time" | Label above the readout. |
| value | string | Controlled time as HH:mm in 24-hour form. Pair with onChange. | |
| defaultValue | string | "09:30" | Initial time when uncontrolled. |
| onChange | (value: string) => void | Called with the new time as HH:mm. | |
| hourCycle | 12 | 24 | 12 | 12 shows AM and PM; 24 adds an inner ring for 13 to 00. |
| step | number | 5 | Minute snap while dragging. Arrow keys still move one minute. |
| size | number | 176 | Dial diameter in pixels. |
| accent | string | "#2f7bff" | Hand, knob and focus color. |