About

solid-countup

A Solid component that animates a number from one value to another. It renders a single <span>, follows your props reactively, and formats through Intl.NumberFormat.

Install

pnpm add solid-countup

Use it

import CountUp from 'solid-countup'

<CountUp endVal={5234} />

The component renders the number as its text content and animates from startVal to endVal over duration seconds.

The props that matter

endVal

The number to count to. The only required prop.

startVal

Where the animation begins. Defaults to 0.

duration

Length of the animation in seconds. Defaults to 2. Use 0 to write the target immediately, with no animation.

autoAnimate

Start when the element scrolls into view, using IntersectionObserver. Defaults to false.

locale

A BCP 47 locale for the number format, for example hi-IN-u-nu-deva for Devanagari digits.

intlNumberFormatConfig

Passed straight to Intl.NumberFormat, so currency, percent, compact notation and signed values all work.

prefix / suffix

Literal text around the number, such as "$" or " USD".

reducedMotion

'user' (default), 'always' or 'never'. When motion is reduced, the final value is written straight away.

onStart / onFrame / onComplete

Callbacks for the start of the animation, each frame, and the end.

What you get

• Locale-aware formatting for free, including currency, percentages, compact notation, non-Latin digits and right-to-left layouts.
• Server rendering that outputs the final value, so a page never flashes 0 before the animation starts.
• Zero runtime dependencies. solid-js is a peer dependency.
• Any extra attributes — class, id, role, aria-* — land on the rendered <span>.

Links

• npm — the published package.
• GitLab — source, issues and the full README.
• Live demo — every feature, running in the browser.
• llms.txt — a plain-text summary for language models.