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 scrollx-ui@latest add statscount

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.

  • stats – Optional array of stat items to display.
    Each item contains:

    • value – The numeric value to animate to.
    • suffix – Optional text suffix (e.g., "+", "K+", "%").
    • label – Descriptive text shown below the stat.
    • duration – Optional animation duration in seconds.

  • title – Optional custom title text.
    If the title contains "WITH", it will automatically split for responsive styling.

  • showDividers – Optional boolean to show or hide vertical divider lines between stats.
    Default: true.

  • className – Optional additional CSS classes for the main container.