Rolling Counter
Free
An odometer counter whose digits roll the shortest way, with separators, decimals and negatives.
Downloads this month
12,480Customize
64px
Separators
0
#f4ede3
Installation
npx shadcn@latest add https://ui.mekaigames.com/r/rolling-counter.jsonWorks in any project set up with the shadcn CLI.
Install the dependency.
npm install motion- Copy the code from the Code tab into
components/ui/rolling-counter.tsx.
Usage
import { RollingCounter } from "@/components/ui/rolling-counter";
<RollingCounter value={downloads} separator="," fontSize={56} suffix="+" />Props
12 properties| Property | Type | Default | Description |
|---|---|---|---|
| value | number | — | The number to show. Negative values get a minus sign. |
| fontSize | number | 48 | Font size in pixels. |
| places | number | "auto" | "auto" | Integer digits: a number pads with zeros, auto uses as many as needed. |
| decimals | number | 0 | Digits after the decimal point. |
| separator | string | "" | Thousands separator, such as "," or a thin space. Empty for none. |
| decimalPoint | string | "." | Character between the integer and fraction digits. |
| prefix | ReactNode | — | Shown before the number, such as a currency symbol. |
| suffix | ReactNode | — | Shown after the number, such as a unit. |
| duration | number | 0.8 | Roll duration per digit, in seconds. |
| stagger | number | 0.04 | Delay between neighbouring digits, starting from the right, in seconds. |
| color | string | "#f4ede3" | Text color. |
| className | string | — | Extra classes for the wrapper. |
Dependencies: motion