Arise UI

Option Wheel

A circular selection wheel with smooth physics-based scrolling, blur effects, and optional sound feedback.

Users can interact with the wheel by dragging with a pointer, scrolling with a mouse wheel/touchpad, or using arrow keys. Clicking an item will smoothly rotate the wheel to center that selection.

Options you can pass to customize this component.

Prop

Type

Description

items

string[]

Labels rendered as the wheel options.

defaultSelected

number

Index of the option selected on mount.

onChange

(index: number, item: string) => void

Called whenever the wheel settles on a new option.

textColor

string

Resting color of the option labels.

activeColor

string

Color an option blends toward as it reaches the middle of the wheel.

side

'left''right'

Edge of the container the wheel curves around.

fontSize

number

Font size of the option labels in rem.

spacing

number

Vertical distance between options as a multiple of the font size.

curve

number

Depth of the circular curve; 0 flattens the wheel into a straight list.

tilt

number

Angle in degrees between neighboring options; higher values curl the wheel tighter.

blur

number

Blur in pixels added per step away from the middle.

fade

number

Opacity lost per step away from the middle.

minOpacity

number

Opacity floor for the furthest options.

smoothing

number

Easing time constant in milliseconds; higher values feel heavier.

inset

number

Padding in pixels between the anchored edge and the centered option.

loop

boolean

Wrap around infinitely instead of stopping at the first and last option.

draggable

boolean

Allow dragging the wheel with a pointer, in addition to scroll and arrow keys.

soundUrl

string

URL of a short tick sound played when the selection changes; empty disables it.

soundVolume

number

Playback volume of the tick sound.

className

string

Additional CSS classes for the outer wrapper.

npx shadcn add amitgajare2/ariseui/option-wheel

Option Wheel