Animated Counter

Numbers that spring-animate to their target value when scrolled into view. Supports prefix ($), suffix (%, k, +), and decimal places. CounterGroup for stat rows.

counternumberspringuseSpring

Installation

bash

# Copy animated-counter.tsx to your project
cp components/ui/animated-counter.tsx your-project/components/ui/animated-counter.tsx

How to use

tsx

import { AnimatedCounter, CounterGroup } from "@/components/ui/animated-counter";

tsx

<CounterGroup
  counters={[
    { target: 10000, suffix: "+", label: "Users" },
    { target: 99.9, suffix: "%", decimals: 1, label: "Uptime" },
    { target: 2.4, prefix: "$", suffix: "M", decimals: 1, label: "Revenue" },
  ]}
/>

Dependencies

framer-motion

Exports

AnimatedCounterCounterGroup

File

components/ui/animated-counter.tsx

Preview

↓ Scroll down to trigger the counters

Users

0.0%

Uptime

$0.0M

Revenue

Components