Dropdowns
Context menus and compact selectors. Fusing mechanical tangibility with crystalline elegance.
Mechanical Lever (Lever Dropdown)
Drag the lever ball down to force the glass menu open. A heavy physical interaction.
Settings
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | ["Dashboard", "Settings", "Billing", "Logout"] | Array of string options to display in the dropdown menu |
| onSelect | (val: string) => void | — | Callback triggered when an option is selected |
| className | string | — | Optional custom class name for the container |
| label | string | "Settings" | The label text displayed on the dropdown lever |
Slot Machine Selector (3D)
Transforms boring option selection into a 3D cylindrical roulette with a giant arcade button. Features elastic physics and confetti explosions on key choices.
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | ["Pro", "Enterprise", "Hobby", "Startup", "Scaleup"] | Array of string options to display on the slot reel |
| onSelect | (val: string) => void | — | Callback triggered when the reel stops on a winning option |
| className | string | — | Optional custom class name for the container |
| spinLabel | string | "Spin" | The label text for the spin button |
| confettiOption | string | "Enterprise" | The specific option that triggers the confetti explosion when selected |
API Reference
Available configuration to customize the component.
| Prop | Type | Default | Description |
|---|---|---|---|
| options | string[] | ["Save", "Save as...", "Export PDF"] | Array of string options for the hidden dropdown menu |
| onSelect | (val: string) => void | — | Callback triggered when an option or main action is selected |
| className | string | — | Optional custom class name for the container |
| defaultSelected | string | — | The initially selected option (defaults to the first item in options) |
Dimension mismatch
Dropdowns is currently only available in the Ink & Acid dimension. Toggle the dimension switcher above to view it.