Animated Stats

A group of statistics that count from 0 to their target values when they enter the viewport, with items staggering in and sliding up.

Loading preview…

npx shadcn@latest add https://webberui.com/r/animated-stats.json

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

First item valuevalue

24000

Count duration (s)duration

1.6

Item stagger (s)stagger

0.15

Entrance delay (s)delay

<AnimatedStats />

Installation

npx shadcn@latest add https://webberui.com/r/animated-stats.json

Or, once registries are configured in components.json, install it as @webberui/animated-stats.

Usage

import { AnimatedStats, StatItem } from "@/components/ui/animated-stats";

<AnimatedStats>
  <StatItem value={120} suffix="+" label="Components" />
  <StatItem value={98} suffix="%" label="Satisfaction" />
  <StatItem value={3.2} suffix="s" decimals={1} label="Average install time" />
</AnimatedStats>

Props

AnimatedStats

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	The statistics (put `StatItem` here)
`delay`	`number`	`0`	Delay before the reveal starts (seconds)
`stagger`	`number`	`0.15`	Stagger interval between items (seconds)
`once`	`boolean`	`true`	Play only the first time the element enters the viewport

StatItem

Prop	Type	Default	Description
`value`	`number`	—	Target value; counts from 0 up to it
`label`	`string`	—	Caption below the number
`prefix`	`string`	`""`	Prefix before the number (for example `$`)
`suffix`	`string`	`""`	Suffix after the number (for example `+`, `%`)
`decimals`	`number`	`0`	Number of decimal places
`duration`	`number`	`1.6`	Duration of the counting animation (seconds)

Accessibility

When the user has "reduce motion" enabled at the system level, the counting and the stagger are skipped and the final numbers are shown right away
The number container carries an aria-label (the final formatted value, including prefix and suffix), and the animating span that counts is hidden from assistive technology (aria-hidden), so screen readers announce only the final value