042
A drum-style time picker: flick the hours and minutes and they spin with momentum, curl away on a 3D wheel and snap onto the row, by touch, trackpad, mouse or keys.
akatime picker·wheel picker·picker wheel
Run this in any project set up for the shadcn CLI. It copies the Time Wheel source into your components folder, so the code is yours to change.
npx shadcn@latest add https://devl.dev/r/time-wheel.jsonImport it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.
import { TimeWheel } from "@/components/time-wheel";
export default function Page() {
return <TimeWheel />;
}A free React component in the Forms collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.
Read from the Time Wheel source. Everything is optional unless it says required.
| Prop | Type | Default |
|---|---|---|
| valuerequired | Time | — |
| onValueChangerequired | (value: Time) => void | — |
| minuteStep | number | 1 |
| hour12 | boolean | true |
| className | string | — |