Data Display

StatCard

Displays a key metric with label, value, optional trend indicator, and comparison text. Used for dashboard statistics.

Overview

The StatCard component is designed for displaying key metrics on dashboards. It shows a labeled value with optional trend indicators and comparison text to provide context at a glance.

Total Patients
1,234
Revenue
$45,231↑12%
vs last month
Churn Rate
2.4%↓0.5%
vs last month

Props

Prop Type Default Description
label string - The metric label/title (required)
value string | number - The primary value to display (required)
icon ReactNode - Optional icon in header
trend { value: number; direction: "up" | "down" } - Trend indicator with percentage
comparison string - Comparison text (e.g., "vs last month")
variant 'default' | 'outlined' 'default' Visual variant
size 'sm' | 'md' | 'lg' 'md' Size variant

Trend Type

interface Trend {
  value: number;     // Percentage value (e.g., 12 for 12%)
  direction: 'up' | 'down';
}

Variants

Visual Variants

Choose between a card with shadow or an outlined style.

Default
1,234
Outlined
1,234
 
<StatCard label="Default" value="1,234" variant="default" />
<StatCard label="Outlined" value="1,234" variant="outlined" />

Sizes

Three size options for different dashboard layouts.

Small
$12,345
Medium
$12,345
Large
$12,345
 
<StatCard label="Small" value="$12,345" size="sm" />
<StatCard label="Medium" value="$12,345" size="md" />
<StatCard label="Large" value="$12,345" size="lg" />

Examples

Basic Stat

Total Users
12,345
 
<StatCard label="Total Users" value="12,345" />

With Upward Trend

Shows a positive trend with a green indicator.

Monthly Revenue
$89,432↑15.3%
 
<StatCard
  label="Monthly Revenue"
  value="$89,432"
  trend={{ value: 15.3, direction: "up" }}
/>

With Downward Trend

Shows a negative trend with a red indicator.

Support Tickets
42↓8%
 
<StatCard
  label="Support Tickets"
  value="42"
  trend={{ value: 8, direction: "down" }}
/>

With Comparison Text

Active Sessions
847↑5.2%
vs last week
 
<StatCard
  label="Active Sessions"
  value="847"
  trend={{ value: 5.2, direction: "up" }}
  comparison="vs last week"
/>

Dashboard Grid

StatCards work well arranged in a grid layout.

Total Patients
2,847↑12%
vs last month
Appointments
156↓3%
vs last week
Revenue
$124,500↑8.5%
vs last month
Satisfaction
94%↑2%
vs last quarter

Outlined Grid

New Users
234
Active
1,847
Churned
12

Accessibility

  • Semantic Content: All content is text-based and readable by screen readers.
  • Trend Colors: Trend indicators use color plus directional arrows to not rely solely on color.
  • No Interaction: StatCards are display-only and don't require keyboard interaction.
  • WCAG Compliance: Meets AA standards for color contrast on all text elements.

Best Practices

  • Use clear, descriptive labels that explain the metric
  • Format values appropriately (currency, percentages, etc.)
  • Provide comparison text to give context to trends
  • Limit dashboard to 4-6 key metrics to avoid overwhelming users