Motion Wheel
A compound carousel wheel with rotation animation, prev/next navigation, dot indicators, and optional center info panel. Supports keyboard control (ArrowLeft/ArrowRight) when focused.
Mountain Sunrise
Ocean Horizon
Forest Path
City Skyline
Desert Dunes
Northern Lights
Forest Path
Install
Use Open-UI CLI or Shadcn CLI to install the component.
Open-UI CLI
Shadcn CLI
Usage
| Item | Prop | Default | Description | Type |
|---|---|---|---|---|
| Root | items | — | Data array for wheel items; each item must have an id. | T[] |
| Root | children | — | Child elements or render content. | ReactNode |
| Root | className | — | Additional CSS class for the element. | string |
| Root | radius | 320 (desktop) / 270 (mobile) | Wheel radius in pixels; responsive default (desktop 320, mobile 270). | number |
| Root | spring | { stiffness: 120, damping: 25, duration: 0.5 } | Spring animation config: stiffness, damping, duration. | { stiffness?, damping?, duration? } |
| Root | initialIndex | 0 | Index of the initially focused item. | number |
| Border | className | — | Additional CSS class for the element. | string |
| AutoCarousel | interval | 3000 | Auto-advance interval in milliseconds (AutoCarousel). | number |
| Wheel | children | — | Render function (item, index) => ReactNode for each wheel item. | (item, index) => ReactNode |
| Item | item | — | Current item data (MotionWheel.Item). | T |
| Item | index | — | Index of the item in the wheel (MotionWheel.Item). | number |
| Item | children | — | Child elements or render content. | ReactNode |
| Navigation | className | — | Additional CSS class for the element. | string |
| Navigation | prevClassName | — | CSS class for the previous (left) navigation button. | string |
| Navigation | nextClassName | — | CSS class for the next (right) navigation button. | string |
| Dots | className | — | Additional CSS class for the element. | string |
| CenterInfo | children | — | Render function (item) => ReactNode for the center info panel content. | (item: T) => ReactNode |
| CenterInfo | className | — | Additional CSS class for the element. | string |