StatsBlock

A statistics display section with optional animated count-up effect.

Active Users

Components

Countries

GitHub Stars

Basic Usage

import { StatsBlock } from "@corew500/ui"

const stats = [
  { label: "Users", value: 10000 },
  { label: "Downloads", value: 50000 },
  { label: "Countries", value: 120 },
  { label: "Stars", value: 5000 },
]

<StatsBlock stats={stats} />

Animated Count-Up

<StatsBlock stats={stats} animated />

With Prefix/Suffix

const stats = [
  { label: "Revenue", value: 2.5, prefix: "$", suffix: "M" },
  { label: "Growth", value: 45, suffix: "%" },
  { label: "Users", value: 10, suffix: "K+" },
]

<StatsBlock stats={stats} animated />

Variants

// Default - clean cards
<StatsBlock variant="default" stats={stats} />

// Compact - tighter spacing
<StatsBlock variant="compact" stats={stats} />

// Minimal - no card styling
<StatsBlock variant="minimal" stats={stats} />

Column Layout

// 2 columns
<StatsBlock stats={stats} columns={2} />

// 3 columns (default)
<StatsBlock stats={stats} columns={3} />

// 4 columns
<StatsBlock stats={stats} columns={4} />

With Title and Description

<StatsBlock
  title="Our Impact"
  description="Numbers that showcase our global reach"
  stats={stats}
  animated
/>

Props

Prop	Type	Default	Description
`stats*`	Stat[]	—	Array of statistics to display
`animated`	enum	`false`	Enable count-up animation for numeric values
`animationDuration`	number	`2`	Animation duration in seconds
`variant`	enum	`default`	—
`columns`	enum	`3`	—
`size`	enum	`default`	—

Stat Type

interface Stat {
  label: string
  value: number
  prefix?: string
  suffix?: string
}

Design Tokens

| Token | Description | |-------|-------------| | --stats-gap | Gap between stat cards | | --stats-value-size | Value font size | | --stats-animation-duration | Count-up duration |