CountUp
Numbers that count — eased value animation with tabular figures, prefixes and suffixes.
Live — this one is real
259
Pieces in the archive
128+
States per component
100%
Reduced-motion safe
Usage
import { CountUp } from "mizu-ui";
export function Stat() {
return <CountUp value={1284} duration={1.4} suffix="+" />;
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect feedback/CountUp.tsx
Source is included in the npm package under src/feedback/CountUp.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Target value. Animates from the previous value on change. |
| duration | number | 1.2 | Animation duration in seconds. |
| delay | number | 0 | Start delay in seconds. |
| decimals | number | 0 | Fraction digits, clamped to 0–20. |
| prefix / suffix | string | "" | Affixes rendered outside the animation. |
Accessibility
The final value is separate screen-reader text; the changing visual figures are aria-hidden. Reduced motion renders the final number directly.
Motion
Quartic ease-out on a rAF loop. Reduced motion sets the value instantly.