127 Components
Picker Wheel
InputsiOS-inspired 3D cylindrical scrolling drum picker for dates, times, and custom option columns with wheel, drag, and click-to-snap physics.
Schedule DeploymentToday · 09 · 30 · AM
Scroll wheel, drag vertically, or click any row to snap
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/picker-wheel.json"
Props
TypeScript props supported by <PickerWheel />.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | PickerColumn[] | — | Array of wheel columns ({ id, label, options, defaultIndex }). |
| onChange | (selectedValues: Record<string, string>) => void | — | Callback fired with a map of column IDs to selected option strings. |
| title | string | "Schedule Deployment" | Header label displayed above the wheel. |
| className | string | — | Additional Tailwind CSS classes for the outer card. |
Key Features
- 3D cylindrical `rotateX` perspective transforms with top and bottom fade masks.
- Supports mouse wheel scrolling, vertical touch/pointer drag, and direct click-to-snap.
- Configurable multi-column architecture for date, time, or custom option lists.
Keyboard & Accessibility
- Each column exposes `role='listbox'` with `ArrowUp` and `ArrowDown` keyboard support.
- Individual items use `role='option'` and `aria-selected`.
- Disables 3D `rotateX` tilt when `prefers-reduced-motion` is enabled.