Animated Stats: Free React + Tailwind Component

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

Bring this into your project

Run this command in your project folder. The CLI adds the source and dependencies; then follow the usage example below.

npx webberui@latest add animated-stats.en

New project or installation trouble? Start here →

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

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

Active edited usageDefault props

<AnimatedStats/>

    </div>
  );
}

The complete example includes the preview layout and data. Install the component first, then paste this file into your project.

Installation

npx webberui@latest add https://webberui.com/r/animated-stats.en.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

Animated Stats