Foundations
Rolling Number
Odometer-style number: each digit rolls to its new value, units and separators stay put.
2 variantsMIT
Preview
48.2kof 200k tokens
Installation
Copies the component into components/ui and installs its dependencies and theme tokens.
pnpm dlx shadcn@latest add https://tuffui.com/r/rolling-number.jsonUsage
Pass your own data and wire the callbacks to your agent runtime.
import { RollingNumber } from "@/components/ui/rolling-number";
<RollingNumber value={formatTokens(used)} className="font-mono text-2xl" />
<RollingNumber value={cost} format={(n) => `$${n.toFixed(2)}`} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value* | number | string | — | A number, or a preformatted string like "87.2k". Only digits roll. |
| format | (value: number) => string | — | Formats a numeric value; defaults to en-US grouping. |
| stagger | number | 24 | Delay between neighbouring digits, right to left, in ms. |
| className | string | — | Typography is inherited; tabular figures are applied. |