Knob Components

Dev Design Library indexes 28 knob components from 21 open-source UI libraries, with the most coming from React Spectrum, Nexvyn UI, Kinetics, audiocn and Watermelon UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Knob components belong to the Inputs group.

• Speed DialMUI / Material UI · React
• Comet DialReact Bits · ReactTick-ring dial you flick by angle: the reading launches on a spring and a velocity-driven comet streaks behind the lit…
• Color WheelReact Spectrum · ReactColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
• Angle SliderArk UI · ReactA component for selecting a value within a circular range.
• Detent DialKokonut UI · ReactRotary knob that clicks from notch to notch and coasts when flicked, built with React and Motion.
• Range Slider RulerbeUI · React
• Slider 07 - Circular Volume DialShadcn Space · ReactA circular knob slider styled as a volume dial: drag around the ring to sweep a gradient arc from the top, with the…
• Dial Knob MotionPixel Perfect · ReactTactile rotary knob with layered bevel discs, two tick rings, and an amber dot-arc indicator. Drag or scroll to change…
• Inertial DialKinetics · HTML/CSSA weighted needle catches up after the ring turns
• Timer DialSwiftPieces · SwiftUIA countdown ring you set by dragging a glass knob around it, with a tick per step, a warning zone and start, pause and…
• FaderNexvyn UI · ReactA mixing-console-style parameter fader where the control IS the display, with continuous and detent value grammars…
• Knobaudiocn · ReactA rotary control drawn in SVG, with vertical, horizontal or circular dragging, fine adjustment, reset, a bipolar…
• Circular SliderShark UI · ReactCircular slider for selecting values.
• Prototype Radial SliderSona UI · React
• Knob SliderWatermelon UI · React
• Rotary DialUI Lab · ReactDrag a hole to the finger stop and each digit lands as the disc unwinds.
• Option WheelCojeev UI · ReactA paper dial, aligned reel or compact readout for choosing one direction with pointer, wheel or keyboard.
• Thermal DialPin UI · React
• DialMetal UI · React + SwiftUIA slider wound into a ring: one track carries a curl from a straight bar to a ring with its gap at six o'clock, min at…
• Glass KnobOpaline · ReactRotary dial with a glass cap — drag around it or use the arrow keys.
• Angle Sliderark-cn · ReactA shadcn-style angle slider component built with Ark UI primitives.
• Tailwind Color WheelReact Spectrum · React
• Rotary KnobKinetics · HTML/CSSDrag in a circle to set a value; snaps to detents on release
• Navigation CompassNexvyn UI · ReactA draggable compass dial that doubles as a nav menu: scroll rotates it with physical lag, and links entering the…
• Pan Controlaudiocn · ReactLeft and right balance with a fill from the centre, a centre detent and reset.
• Knob Slider BaseWatermelon UI · React
• Sundial PickerUI Lab · ReactPick a time by dragging the sun across the sky.
• Vanilla Color WheelReact Spectrum · React

Libraries with knob components

• React Spectrum
• Nexvyn UI
• Kinetics
• audiocn
• Watermelon UI

Related categories

• React Knob Components
• Tailwind CSS Knob Components
• Animated Knob Components
• Input Components
• Text Input Components
• Select Components
• Form Field Components
• Form Components
• Textarea Components
• Switch Components
• Checkbox Components
• Slider Components
• Radio Components
• Combobox Components
• File Upload Components
• Search Input Components
• Date Picker Components
• Login Form Components
• Color Picker Components