Number Roll

Numbers that move with their value. Each changing digit rolls into place, with support for currency, compact notation, and live counters.

Install with the shadcn CLI

npxnpx shadcn@4.21.5 add @cavemio/number-roll

First install? Configure @cavemio once

Run npx shadcn@4.21.5 init if shadcn is not set up, then merge this entry into the registries field in your existing components.json. Keep your other settings and registries.

components.json

{
  "registries": {
    "@cavemio": "https://registry.cavemio.dev/r/cavemio-{name}.json"
  }
}

Overview

Numbers that move with their value. Each changing digit rolls into place, with support for currency, compact notation, and live counters.

Demo values are local; no network requests.

import { NumberRoll } from "@/components/number-roll";

<NumberRoll value={1248} locales="en-US" />
<NumberRoll
  value={49}
  format={{ style: "currency", currency: "USD" }}
/>

Props

Prop	Type	Description
`value`	`number`	The number to display.
`format`	`Intl.NumberFormatOptions`	Currency, percent, decimals, compact notation or grouping.
`locales`	`string \| string[]`	Locale used to format the number.
`prefix / suffix`	`string`	Text placed before or after the formatted number.
`from`	`number`	Optional starting value for the initial count-up.
`duration`	`number · 900`	Roll duration in milliseconds.
`direction`	`"up" \| "down"`	Override the direction inferred from value changes.