MetricCard

Versatile card for displaying metrics with multiple layouts, appearances, and data enhancers.

Props

MetricCardProps

Prop	Type	Default	Description
title	string	Required	Metric label
value	string | number	Required	Metric value
subtitle	string	-	Additional context
icon	LucideIcon	-	Icon component
iconClassName	string	-	Icon container class
variant	MetricCardVariant	'default'	Semantic color variant
layout	MetricCardLayout	'standard'	Structural layout
appearance	MetricCardAppearance	'soft'	Visual skin
trend	MetricCardTrend	-	Trend indicator
progress	MetricCardProgress	-	Progress bar
chart	MetricCardChart	-	Mini chart
actionLabel	string	-	Action link text
onAction	() => void	-	Action click handler
className	string	-	Card container class
children	ReactNode	-	Custom content (split layout)

---

Layout Variants

type MetricCardLayout = 'compact' | 'standard' | 'split' | 'centered' | 'inline';

Layout	Description
compact	Minimal KPI, horizontal with small icon
standard	Default layout with icon on right
split	Value on left, chart/content on right
centered	Centered value for totals, gauges
inline	Horizontal row for lists

---

Appearance Variants

type MetricCardAppearance = 'soft' | 'solid' | 'gradient' | 'glass' | 'dark';

Appearance	Description
soft	Light background, subtle borders
solid	Flat background, higher contrast
gradient	Soft gradient backgrounds
glass	Glassmorphism with blur
dark	Dark mode optimized with glow

---

Color Variants

type MetricCardVariant = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'info';

---

Data Enhancers

MetricCardTrend

interface MetricCardTrend {
  value: number;
  direction: 'up' | 'down';
  label?: string;
}

MetricCardProgress

interface MetricCardProgress {
  value: number;
  max?: number;      // default: 100
  showLabel?: boolean;
}

MetricCardChart

interface MetricCardChart {
  type: 'bar' | 'line' | 'area';
  data: number[];
  color?: string;
}

---

Examples

Basic Usage

<MetricCard
  title="Total Revenue"
  value="$45,678"
  icon={DollarSign}
  variant="success"
/>

With Trend and Chart

<MetricCard
  title="Weekly Sales"
  value="$23,540"
  layout="split"
  appearance="gradient"
  variant="primary"
  trend={{ value: 12.5, direction: 'up', label: 'vs last week' }}
  chart={{ type: 'area', data: [10, 25, 15, 30, 45, 35, 50] }}
/>

Centered with Progress

<MetricCard
  title="Goal Progress"
  value="67%"
  layout="centered"
  appearance="glass"
  icon={Target}
  progress={{ value: 67, max: 100, showLabel: true }}
/>

Dark Appearance

<MetricCard
  title="Earned Today"
  value="$960"
  appearance="dark"
  variant="primary"
  trend={{ value: 12, direction: 'up' }}
  chart={{ type: 'bar', data: [720, 850, 920, 780, 960] }}
/>

Compact Layout

<MetricCard
  title="Active Users"
  value="1,234"
  icon={Users}
  layout="compact"
  trend={{ value: 8.5, direction: 'up' }}
/>

See also

• MetricCard (Conceptual)
• StatCard