Stats Carousel

Animated statistics counter in stacked carousel for modern websites.

CREATE STUNNING INTERFACES WITH SCROLLX UI COMPONENTS

0+

Handcrafted animated components

12K+

Developers building with ScrollX UI

99%

Performance optimized for web

Installation

npx shadcn@latest add https://scrollxui.dev/registry/statscarousel.json 

Usage

import StatsCarouselcount from "@/components/ui/statscarousel";
<StatsCarouselcount
  title="CREATE STUNNING INTERFACES WITH SCROLLX UI COMPONENTS"
  stats={[
    { value: 40, suffix: "+", label: "Handcrafted animated components" },
    { value: 12, suffix: "K+", label: "Developers building with ScrollX UI" },
    { value: 99, suffix: "%", label: "Performance optimized for web" },
  ]}
  className=""
  cardClassName=""
/>

Examples


Drag

CREATE STUNNING INTERFACES WITH SCROLLX UI COMPONENTS

0+

Handcrafted animated components

12K+

Developers building with ScrollX UI

99%

Performance optimized for web

API Reference

Stats Carousel

Animated number stack for next-gen websites in stacked carousel.

Props

PropertyTypeDefaultDescription
stats{ value: number; suffix?: string; label: string; id?: number; }[]optional
Array of stats with value, suffix (like %, K+), label, and optional id.
animation"drag" | autoauto
If set to "drag", enables draggable top card mode instead of automatic stacked animation.
titlestringoptional
Optional title shown above the carousel cards.
classNamestring""
Additional classes for the outer wrapper section.
cardClassNamestring""
Additional classes for styling individual stat cards.

Built withby Ahdeetai.