StatCard

Purpose

StatCard displays a single metric or KPI with:

• Icon indicator
• Numeric or text value
• Descriptive label
• Color variants for semantic meaning

When to use

Use StatCard for:

• Dashboard KPIs
• Summary metrics at the top of list pages
• Quick status indicators

Basic usage

import { StatCard } from '@/shared/ui/components/StatCard'
import { Users, TrendingUp, AlertCircle } from 'lucide-react'

export function DashboardStats() {
  return (
    <div className="grid grid-cols-4 gap-4">
      <StatCard
        icon={<Users />}
        value="1,234"
        label="Total Users"
      />
      <StatCard
        icon={<TrendingUp />}
        value="+12%"
        label="Growth"
        variant="success"
      />
      <StatCard
        icon={<AlertCircle />}
        value="3"
        label="Issues"
        variant="warning"
      />
    </div>
  )
}

Props

Prop	Type	Default	Description
icon	ReactNode	-	Icon element (Lucide icon recommended)
value	string | number	Required	The metric value
label	string	Required	Description of the metric
variant	'default' | 'success' | 'warning' | 'danger' | 'info'	'default'	Color theme
className	string	-	Additional CSS class

Variants

Variant	Use case
default	Neutral metrics
success	Positive indicators (growth, completed)
warning	Attention needed (pending, expiring)
danger	Critical issues (errors, overdue)
info	Informational metrics

Notes

• Icons are automatically sized and colored based on variant
• Built on the Card primitive for consistent styling
• For animated counters with trends, see LiveCounter