Rotary Knob
A knob you turn by dragging up and down on the cap or round the ring.
$149 once · every Pro piece
Customize
The value arc is a hairline with a bone fill whose head runs hot while it turns; with detents it clicks between positions with a small overshoot and a haptic tap. Wheel, arrows, PgUp/PgDn, Home/End and double-click to reset all work.
Install
npx shadcn@latest add @obsyde/rotary-knobNeeds your licence key · Get Pro
Usage
Import it from where the CLI puts it, or copy the files below by hand.
import { RotaryKnob } from '@/components/obsyde/ember/rotary-knob/RotaryKnob';
export function Example() {
return (
<RotaryKnob defaultValue={40} />
);
}
Files
What you get with Pro: plain React, TypeScript and CSS, with no dependencies.
ember/rotary-knob/RotaryKnob.tsxcomponentember/rotary-knob/rotary-knob.cssstylesember/rotary-knob/RotaryKnobDemo.tsxdemoember/tactile-kit/kit.tssharedember/shared/accent.tssharedember/shared/spring.tssharedember/shared/ember.cssshared
API
| Prop | Type | Default |
|---|---|---|
accentAccent | 'ember' | 'volt' | 'arc' | 'ember' |
valueValue | number | 40 |
minMin | number | 0 |
maxMax | number | 100 |
stepStep | number | 1 |
detentsDetents | number | 0 |
sizeSize | number | 120 |
labelLabel | string | — |
unitUnit | string | — |
disabledDisabled | boolean | false |