CountUp
Animates a number from a start value to its final value when scrolled into view. Screen readers always get the real value; reduced motion renders it immediately.
Installation
npx dafink-ui add count-upDemo
12,480Daily downloads
99.98%Uptime
$1,200,000ARR
Props
| Name | Type | Default | Description |
|---|---|---|---|
| value | number | - | Required. Final value to count up to. |
| start | number | 0 | Value the animation starts from. |
| duration | number | 1000 | Animation duration in milliseconds, eased with the --ease-standard token curve. |
| decimals | number | 0 | Number of decimal places rendered. |
| prefix | string | "" | String prepended to the number (e.g. "$"). |
| suffix | string | "" | String appended to the number (e.g. "%"). |
| separator | string | "" | Thousands separator (e.g. ","). |
| className | string | "" | Additional Tailwind classes merged onto the root span. |
Accessibility
CountUp checks window.matchMedia('(prefers-reduced-motion: reduce)') in JS (a CSS rule can't stop a requestAnimationFrame loop) and, when it matches, skips the tween and renders the final value immediately. The animated digits are aria-hidden with the real final value duplicated in a visually-hidden (sr-only) span for assistive tech, and CountUp is a non-interactive <span> with no keyboard behavior to alter.