FreeStats

Stats Counter Strip

Use this component below hero sections, inside case studies, or near CTAs to make key product numbers easy to scan.

ReactTailwind CSSMotionStats

120

launches

4.9

rating

24h

Overview

A responsive animated stats strip for product metrics, ratings, and proof numbers.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<StatsCounterStrip />

Stats Counter Strip.tsx

tsx

"use client";

import { motion } from "framer-motion";

const stats = [["120", "launches"], ["4.9", "rating"], ["24h", "reply"]];

export function StatsCounterStrip() {
  return (
    <div className="grid w-full max-w-xl gap-3 sm:grid-cols-3">
      {stats.map(([value, label], index) => (
        <motion.div
          key={label}
          initial={{ opacity: 0, y: 12 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true }}
          transition={{ delay: index * 0.08 }}
          className="rounded-xl border border-white/10 bg-zinc-950 p-5 text-center text-white"
        >
          <p className="text-4xl font-black">{value}</p>
          <p className="mt-1 text-xs uppercase tracking-widest text-zinc-400">{label}</p>
        </motion.div>
      ))}
    </div>
  );
}