Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA KPI that counts up to a new value, skips the animation for reduced motion, and announces only the final value once.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Headline numbers that change while on screen.
Do not use it when: Values that update many times per second.
import { KpiCountUp } from "@/components/kpi-count-up"<KpiCountUp label="Signups" value={12840} />| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Metric name. |
value | number | - | Target value. |
durationMs | number | 800 | Animation length. |
reducedMotion | boolean | media query | Override the reduced-motion preference. |
format | (n: number) => string | en-US integer | Formatter. |
The animating number is aria-hidden; a role=status region gets the final value once. prefers-reduced-motion jumps straight to the value.
The pattern ships with a test (kpi-count-up.test.tsx). Tests drive the real interactions and the pure helper functions.