Level
0100
<PhysicalKnob variant="minimal" />Clean surfaces and measured motion.
Installation
Use the shadcn CLI to copy the component source and its dependencies into your own project. Installs motion and @number-flow/react, plus the Ovio theme, world, motion, rolling-number items.
npx shadcn add JanaSundar/ovio/physical-knob↳You own the source. Ovio components arrive in your codebase so you can edit any part of their style, behavior, or data flow.
Usage
Set the visual world on the component, or wrap the page in an OvioProvider to set a default for everything inside it.
TSXvariant="minimal"
import { PhysicalKnob } from "@/components/ovio/physical-knob/physical-knob"
<PhysicalKnob
variant="minimal"
onValueChange={setLevel}
/>Built with: CSS · Motion for React (spring, drag, inertia)
Motion in Minimal: Small springs, opacity and layout shifts that show state.
Props
Control the data, selected world, animation behavior, and callbacks.
| Prop | Type | Description |
|---|---|---|
| variant | | "minimal" | "craft" | "retro" | "toy" | Which world to render. Defaults to the nearest OvioProvider, then minimal. |
| value / defaultValue | number | Controlled value, or the starting one (72). |
| min / max | number | Range, default 0–100. |
| onValueChange | (value: number) => void | Fires while turning. |
| label | string | Accessible name, printed on the dial. |
| className | string | Merged onto the root. |