ns-ui
Bounded numeric stepper with a large mono value readout, prominent -/+ buttons, and a labeled history strip: an inertial needle swings to each committed value while the strip advances, etching the last 20 adjustments with the newest mark highlighted.
Use when a bounded numeric value where the last twenty adjustments are worth seeing, the needle swinging to each committed value while the history strip etches the trail, with increment and decrement equally weighted; pick stepper-ratchet instead when decrementing is costly and should cost a deliberate hold, or slider-vernier when the final digit needs precision dragging rather than discrete steps.
Install
npx shadcn add https://design.helpmarq.comns-ui / stepper-needle — a number stepper that draws its own history
Set the target temperature for the living room.
20.8°C
heating 0.7°
Click − or + (or type a number) to change the target. Each change is etched onto the history strip on the right — the ringed dot is your latest adjustment. A red edge appears when you hit the 10–30 °C limit.
$18.50 each · ships in 2 days
$37.00
Changing the quantity updates the subtotal above. Hold − or + to sweep quickly.
Keyboard: arrow keys step, Shift+Arrow jumps 10 steps, Home/End snap to the limits, typed values clamp on Enter. Hitting a limit gives the needle a hard-stop quiver.
| Prop | Type | Default | Description |
|---|---|---|---|
| value? | number | — | controlled value; omit for uncontrolled |
| defaultValue? | number | 20 | — |
| min? | number | 0 | — |
| max? | number | 100 | — |
| step? | number | 1 | — |
| label? | string | "Value" | accessible name for the spinbutton |
| unit? | string | — | unit suffix rendered beside the value, e.g. "°C" |
| onValueChange? | (value: number) => void | — | — |
| disabled? | boolean | false | — |
| className? | string | — | — |