ns-ui / counter-carry-ripple
requests / min
requests / min: 995
account balance · usd
account balance · usd: 128.40
ns-ui
Display-only numeric readout where change animates the way arithmetic works: only the digits that differ move, and a carry (199 -> 200) visibly ripples right-to-left across the columns it touches.
Use when a live numeric readout where the structure of the change matters, only the digits that actually differ moving and a carry rippling right to left across the columns it touches; pick countdown-vapor-digits instead when the number counts down to a deadline and the transition should be atmospheric, or split-flap-board when the value is a short status string rather than a number.
Install
npx shadcn add https://design.helpmarq.comns-ui / counter-carry-ripple
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | the number to display; every render diffs against the previous value |
| decimals? | number | — | fixed count of fractional digits (0 = integers only) |
| label? | string | — | visible caption above the readout, also prefixed onto the SR announcement |
| className? | string | — | — |