A rotary control with a real edge. The knob is a short cylinder seen from above: a stack of discs gives it thickness, a ring of ticks lights up to the value, and the number is always written beside it. Drag it or use the keys; with detents on it clicks through every tenth.
Files · 9
Dependencies
npm packages
@radix-ui/react-slot
clsx
lucide-react
tailwind-merge
Registry items
https://caliperui.site/r/styles.json
Registry Items
rotary-knob
Configuration
Name
rotary-knob
Type
UI
Description
A rotary control with a real edge. The knob is a short cylinder seen from above: a stack of discs gives it thickness, a ring of ticks lights up to the value, and the number is always written beside it. Drag it or use the keys; with detents on it clicks through every tenth.