Stats Carousel

Animated statistics counter in stacked carousel for modern websites.

Installation

npx shadcn@latest add @scrollxui/statscarousel

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

API Reference

Stats Carousel

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

Props

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