StatsCount

Animated statistics counter with responsive layout and scroll triggers.

CREATE STUNNING INTERFACESWITHSCROLLX UI COMPONENTS

0+

Handcrafted animated components

0K+

Developers building with ScrollX-UI

0%

Performance optimized for web

Installation

npx shadcn@latest add https://scrollx-ui.vercel.app/registry/statscount.json

Usage

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"},
 ];
<StatsCount
    stats={stats}
    title="CREATE STUNNING INTERFACES WITH SCROLLX-UI COMPONENTS"
    showDividers={true}
    className=""
  />

API Reference

StatsCount

The root component for displaying animated, responsive statistics counters with optional scroll-triggered animations.

Props

PropertyTypeDefaultDescription
statsArray<{ value: number; suffix?: string; label: string; duration?: number }>—
Array of stat items with value, label, optional suffix, and animation duration.
titlestring—
Custom title text; splits on 'WITH' for responsiveness.
showDividersbooleantrue
Show or hide vertical divider lines.
classNamestring—
Optional class for styling the container.

Built withby Ahdeetai.