Dev Design LibraryOpen the library

React Knob Components

Dev Design Library indexes 25 React knob components from 19 open-source UI libraries, with the most coming from React Spectrum, Nexvyn UI, audiocn, Watermelon UI and UI Lab. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. 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…
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
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 React knob components

Related categories