Stats Count

Component

About

An animated statistics counter section that counts up numbers with a spring animation when scrolled into view, with a responsive title and optional dividers between stats.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Stats Count to your project and fits it to your theme.

Code

How Stats Count is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import StatsCount from "@/components/ui/statscount";

const stats = [
  { value: 30, suffix: "+", label: "Handcrafted animated components" },
  { value: 12, suffix: "K+", label: "Developers building with ScrollX-UI" },
  { value: 99, suffix: "%", label: "Performance optimized for web" },
];

export default function StatsCountDemo() {
  return (
    <StatsCount
      stats={stats}
      title="CREATE STUNNING INTERFACES WITH SCROLLX-UI COMPONENTS"
      showDividers={true}
      className=""
    />
  );
}