purrfect uiComponents

Counter

A number that rolls digit by digit to its target.

Behaviour

  • Reduced motion: the digits switch with no roll.
  • Each digit is a column of 0 to 9 that slides to the new digit in 0.9s.
  • Columns are keyed from the right, so 99 to 100 grows a column instead of reshuffling.
  • Digits use tabular figures and a fixed 1ch cell, so the number does not jitter.
  • Screen readers get the formatted number once, not the 0 to 9 stack.

Props

PropTypeDescription
valuenumberThe number to show. Change it and each digit column rolls to its new digit.
localestringdefault "en-US"BCP 47 tag for the digit grouping (1,234 or 1.234).
classNamestringSize and weight come from here, e.g. text-8xl font-semibold.

Installation

npx shadcn@latest add https://purrfectui.com/r/counter.json

How to use

import { Counter } from "@/components/ui/counter";

<Counter value={2480} className="text-8xl font-semibold tracking-tight" />
<Counter value={1234567} locale="de-DE" className="text-6xl" />

Source code

Loading…

License

MIT. Copy it into your project and change it as you like.

0