StatCard

A statistics display card for dashboards with icon, value, and trend indicator.

Import

import { StatCard, StatCardSkeleton } from '@/components/ui';

Basic Usage

<StatCard
  title="Total Users"
  value="1,234"
/>

Props

Prop Type Default Description
title string required Stat label
value string | number required Stat value
icon ReactNode - Icon element
iconBgColor 'blue' | 'purple' | 'green' | 'orange' | 'pink' | 'indigo' - Icon background color
trend { value: number, direction: 'up' | 'down' | 'neutral', label?: string } - Trend indicator
loading boolean false Show skeleton

With Icon

import { UsersIcon } from '@/components/icons';

<StatCard
  title="Total Users"
  value="1,234"
  icon={<UsersIcon className="h-6 w-6" />}
  iconBgColor="blue"
/>

With Trend

<StatCard
  title="Revenue"
  value="$48,200"
  icon={<DollarIcon className="h-6 w-6" />}
  iconBgColor="green"
  trend={{
    value: 12,
    direction: 'up',
    label: 'vs last month'
  }}
/>

Trend Directions

// Positive trend (green)
<StatCard
  title="Users"
  value="1,234"
  trend={{ value: 12, direction: 'up', label: 'vs last month' }}
/>

// Negative trend (red)
<StatCard
  title="Churn"
  value="2.3%"
  trend={{ value: 5, direction: 'down', label: 'vs last month' }}
/>

// Neutral trend (gray)
<StatCard
  title="Sessions"
  value="8,456"
  trend={{ value: 0, direction: 'neutral', label: 'no change' }}
/>

Loading State

<StatCard loading />
// or
<StatCardSkeleton />

Dashboard Example

import { StatCard } from '@/components/ui';
import { UsersIcon, DollarIcon, ShoppingCartIcon, ChartIcon } from '@/components/icons';

export function DashboardStats({ stats, isLoading }) {
  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
      <StatCard
        title="Total Users"
        value={stats?.users?.toLocaleString() ?? '-'}
        icon={<UsersIcon className="h-6 w-6" />}
        iconBgColor="blue"
        trend={stats?.usersTrend}
        loading={isLoading}
      />
      <StatCard
        title="Revenue"
        value={`$${stats?.revenue?.toLocaleString() ?? '-'}`}
        icon={<DollarIcon className="h-6 w-6" />}
        iconBgColor="green"
        trend={stats?.revenueTrend}
        loading={isLoading}
      />
      <StatCard
        title="Orders"
        value={stats?.orders?.toLocaleString() ?? '-'}
        icon={<ShoppingCartIcon className="h-6 w-6" />}
        iconBgColor="orange"
        trend={stats?.ordersTrend}
        loading={isLoading}
      />
      <StatCard
        title="Conversion"
        value={`${stats?.conversion ?? '-'}%`}
        icon={<ChartIcon className="h-6 w-6" />}
        iconBgColor="purple"
        trend={stats?.conversionTrend}
        loading={isLoading}
      />
    </div>
  );
}

Icon Background Colors

Color Light Mode Dark Mode
blue Blue-100 Blue-950/20
green Green-100 Green-950/20
purple Purple-100 Purple-950/20
orange Orange-100 Orange-950/20
pink Pink-100 Pink-950/20
indigo Indigo-100 Indigo-950/20

Responsive Design

The component is responsive: