Wheel Selector — React Component

An interactive radial navigation dial for services, features, or portfolio items with drag, wheel, and click input plus a responsive mobile arch.

Feature Sectionshoverspringlayoutwheelradialnavigationservicesportfoliodragresponsiveframer-motion

Wheel Selector

Playground

Shape the component before you copy it.

Adjust the important props for this component and grab JSX that matches your choices.

theme

Curated color treatment or fully overridden custom colors.

variant

Responsive ring-to-arch behavior or a forced presentation variant.

contentMode

Amount of supporting content shown beside the dial.

ringRadius

Desktop ring radius in pixels, clamped between 100 and 400.

tickCount

Number of dial perimeter tick marks, clamped from 10 to 80.

showTicks

Display the animated perimeter tick marks.

showCounter

Display the animated selection counter in the hub or arch.

showCTA

Enable per-item call-to-action links globally.

Generated JSX

Copy this into your page.

<WheelSelector
  theme="obsidian"
  variant="responsive"
  contentMode="detailed"
  ringRadius={186}
  tickCount={48}
  showTicks={true}
  showCounter={true}
  showCTA={false}
/>

Animation effects

hoverspringlayout

Copy-paste ready

Use the Code tab above to inspect and copy this component into your project.

Installation

Wheel Selector

Shape the component before you copy it.

Animation effects