Tailwind CSS Knob Components

Dev Design Library indexes 21 Tailwind CSS knob components from 15 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 styles its components with Tailwind CSS utility classes. Knob components belong to the Inputs group.

• Color WheelReact Spectrum · ReactColorWheels allow users to adjust the hue of an HSL or HSB color value on a circular track.
• 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.
• 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 Tailwind CSS knob components

• React Spectrum
• Nexvyn UI
• audiocn
• Watermelon UI
• UI Lab

Related categories

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