Drum Picker

Pro

Spinning wheel picker on a real 3D drum, where rows tilt away as they turn and brighten in the centre band. Fling it to settle on a row, loop hours and minutes, and link columns for dates and times.

Preview

Installation

npx @lumioui/cli add pro/drum-picker

Usage

import { DrumPicker, DrumPickerGroup } from "@/components/ui/drum-picker/drum-picker";
<DrumPicker />

Also exported: DrumPickerGroup.

Examples

Birthday

The birthday step of a sign-up.

Duration timer

A duration timer for a dough proof.

API reference

DrumPicker

Prop Type Default
options* DrumPickerOption[]

Plain strings, or { label, value } pairs when the display text differs from the emitted value.

 —
value string

Controlled selected value.

 —
defaultValue string

Uncontrolled initial value.

 —
onValueChange (value: string) => void

Fires once per settle — when the wheel lands on a new row, not per frame. Also fires when the options shrink under the current value (a day column losing the 31st) with the row the wheel moved to.

 —
loop boolean

Wrap around (…58, 59, 00, 01…). Needs more options than visible rows. Default false.

 false
unit string

Fixed unit beside the band ("hours", "min"). Rows right-align to it.

 —
itemHeight number

Height of one row in pt. Default 44, or the group's.

 —
visibleItems number

Visible rows (odd looks best). Default 5, or the group's.

 —
textClassName string

Classes for option text (size, alignment).

 —
hapticTicks boolean

Haptic tick per row crossed. Default true.

 true
band boolean

Draw the selection band behind the centre row. Default true alone, false inside a DrumPickerGroup (the group draws one shared band).

 —
lens boolean

Lit top edge on the band. Default true.

 true
disabled boolean false
className string —

DrumPickerGroup

Prop Type Default
itemHeight number

Row height shared by every wheel in the group. Default 44.

 44
visibleItems number

Visible rows shared by every wheel in the group. Default 5.

 5
lens boolean

Lit top edge on the shared band. Default true.

 true
className string —
children React.ReactNode —