Rotary Dial

A draggable rotary knob control that snaps to defined steps along a 270° arc, with tick marks that flash and a rolling numeric readout, for picking a numeric value like temperature or volume.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Rotary Dial to your project and fits it to your theme.

import UiDial from "@/components/ui/ui-dial";

export default function Example() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
      <UiDial
        defaultValue={0.7}
        min={0}
        max={1}
        step={0.1}
        label="Temperature"
      />
    </div>
  );
}