# Drum Picker

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.

> Composed · Pro · Signature — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/drum-picker
```

## Import

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

## Variants

- `date` — Birthday: `npx @lumioui/cli add pro/drum-picker-date`
- `timer` — Duration timer: `npx @lumioui/cli add pro/drum-picker-timer`

## Props

### DrumPicker

| Prop | Type | Notes |
| --- | --- | --- |
| `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. |
| `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. |
| `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. |
| `disabled?` | `boolean` | — |
| `className?` | `string` | — |

### DrumPickerGroup

| Prop | Type | Notes |
| --- | --- | --- |
| `itemHeight?` | `number` | Row height shared by every wheel in the group. Default 44. |
| `visibleItems?` | `number` | Visible rows shared by every wheel in the group. Default 5. |
| `lens?` | `boolean` | Lit top edge on the shared band. Default true. |
| `className?` | `string` | — |
| `children?` | `React.ReactNode` | — |

Source: https://lumioui.com/components/drum-picker