‹ components

RollingNumber

stablev1.0.0·open in canvas

Streaming numeral: only the characters that change roll in -- zero layout shift, calm by design.

Installnpx shadcn add @cids/rolling-number
Live demo
+0.00

Motion · tap to replay

honors reduced-motion

`roll-in` keyframe (0.45em rise + fade) on changed slots only; discrete, never looping; reduced-motion collapses globally.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { RollingNumber } from "@/design-system";

<RollingNumber value={fmtUsd(price)} className="data-lg" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

Streaming numeral: only the characters that change roll in -- zero layout shift, calm by design.

Anatomy

$ 1 8 4 . 2 6
          ^-^-- changed slots re-mount and roll in
(unchanged slots keep their DOM nodes still)

Props

PropTypeDefaultNotes
valuestring--Pre-formatted figure -- formatting is the caller's (keep unrounded terminal DNA).
classNamestring--cn-merged; defaults to data-md, override with data-lg etc.

Motion

roll-in keyframe (0.45em rise + fade) on changed slots only; discrete, never looping; reduced-motion collapses globally.

A11y

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.