Styling

Every part exposes data-dragging, data-coasting and data-disabled. Use them with Tailwind variants or CSS attribute selectors.

<ClickWheel.Ring className="rounded-full bg-muted cursor-grab data-[dragging]:cursor-grabbing data-[disabled]:opacity-50" />

Root sets three variables. --click-wheel-fraction is the value as a number from 0 to 1. --click-wheel-turns is the value's distance from min in revolutions, so 1.5 means one and a half revolutions. --click-wheel-rotation is the cumulative angle of the rotor in degrees. During a gesture they update directly from the continuous position. When it ends, progress reconciles to the accepted value, including any step rounding. Changes to bounds and gearing also update progress.

.arc {
  background: conic-gradient(
    var(--primary) calc(var(--click-wheel-fraction) * 360deg),
    transparent 0
  );
}

.groove-3 {
  background: conic-gradient(
    var(--primary) calc(clamp(0, calc(var(--click-wheel-turns) - 2), 1) * 360deg),
    transparent 0
  );
}

.needle {
  rotate: var(--click-wheel-rotation, 0deg);
}

Rotor sets will-change: transform to reduce repainting during rotation. Avoid CSS transitions on rotate; restarting a transition on each pointer update can cause stuttering.

className and style accept a function of the part's state. The state is { value, dragging, coasting, disabled }.

<ClickWheel.Ring
  className={(state) => (state.dragging ? "ring ring-held" : "ring")}
  style={(state) => ({ opacity: state.disabled ? 0.5 : 1 })}
/>

Replace a part's element or compose it with your own component. Handlers chain, class names join, other props override. Refs are composed, including callback cleanup functions. Custom components must forward the received props and ref.

<ClickWheel.Center render={<div />} />

<ClickWheel.Center render={<Button variant="ghost" />} />