A numeric input you drag sideways to change, like the fields in design tools. Typing and arrow keys still work.
npx shadcn@latest add https://hyperblur.dev/r/scrub-field.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/scrub-field.tsx.
import { ScrubField } from "@/components/hyperblur/scrub-field"
<ScrubField label="Width" defaultValue={50} min={0} max={100} suffix="px" />| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | Controlled value. | |
| defaultValue | number | 0 | Initial value when uncontrolled. |
| onChange | (value: number) => void | Called whenever the value changes. | |
| min | number | Lowest allowed value. | |
| max | number | Highest allowed value. | |
| step | number | 1 | Increment for arrow keys, and the grid values snap to while dragging. |
| sensitivity | number | 0.5 | Units changed per pixel dragged. Hold Shift for 10x. |
| label | string | "Value" | Drag handle text, also the input's accessible name. |
| suffix | string | "" | Unit shown after the number, such as px or %. |