A vertical drum picker. Options sit on a cylinder in perspective and snap to the center after a drag, flick, wheel step or key press. Set the text size with style or className on the picker.
npx shadcn@latest add https://hyperblur.dev/r/wheel-option-picker.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/wheel-option-picker.tsx.
import { WheelOptionPicker } from "@/components/hyperblur/wheel-option-picker"
<div style={{ width: 160 }}><WheelOptionPicker options={["Morning", "Noon", "Evening"]} defaultValue="Noon" onChange={console.log} /></div>| Prop | Type | Default | Description |
|---|---|---|---|
| options | (string | { value: string; label?: string })[] | 12 months | Choices on the wheel. Strings are used as both value and label. |
| value | string | Controlled selected value. Pair with onChange. | |
| defaultValue | string | Initial selected value when uncontrolled. Defaults to the first option. | |
| onChange | (value: string) => void | Called when the selection changes. | |
| itemHeight | number | 40 | Height of one row in pixels. |
| rows | number | 5 | Number of rows visible. Use an odd number. |
| accent | string | "#2f7bff" | Color of the selection band and focus ring. |
| hint | boolean | true | Nudge the wheel gently now and then until the user touches it. Off under reduced motion. |
| label | string | "Option picker" | Accessible name of the listbox. |