UnifiedMetrics#

The UnifiedMetrics component is a powerful, consolidated solution for displaying metrics, statistics, and KPIs. It replaces four previous components (MetricsCard, MetricsGrid, StatsGrid, StatsOverview) with a single, flexible component.

Basic Usage#

Props#

UnifiedMetricsProps#

UnifiedMetric Object#

Variants#

Default Variant#

Standard metrics display with white background:

Card Variant#

Elevated cards with colored backgrounds:

Minimal Variant#

Clean, minimal design for subtle metrics display:

Sizes#

Control the size of metrics display. Same metrics, three size values:

Layouts#

Same metrics, three layout values — grid (default), horizontal, and vertical:

Icons#

Available built-in icons:

• trending - TrendingUp icon
• users - Users icon
• dollar - DollarSign icon
• target - Target icon
• clock - Clock icon
• zap - Zap (lightning) icon

Colors#

Available color themes:

• blue - Primary blue
• green - Success green
• purple - Info purple
• red - Error/warning red
• yellow - Warning yellow
• indigo - Accent indigo
• gray - Neutral gray

Trends#

Add trend indicators to show metric changes:

Migration from Old Components#

The deprecated components below are thin wrappers around UnifiedMetrics — each pair renders identically.

From MetricsCard#

From MetricsGrid#

From StatsGrid#

Real-World Examples#

Project Metrics#

Performance Dashboard#

Business KPIs#

Accessibility#

• ✅ Keyboard navigable
• ✅ Screen reader friendly
• ✅ ARIA labels included
• ✅ Color-blind safe color schemes
• ✅ High contrast mode support

Performance#

• Bundle size: ~2.5KB gzipped
• Zero runtime dependencies (uses Lucide React icons)
• Optimized for React 18+ with concurrent rendering
• Lazy loading support

Dark Mode#

All variants automatically adapt to dark mode with no additional configuration needed.

Best Practices#

1. Keep metrics focused: Show 3-6 key metrics, not dozens
2. Use consistent units: "$1M" not "$1,000,000"
3. Choose appropriate colors: Green for positive, red for alerts
4. Add descriptions: Help users understand what metrics mean
5. Show trends: Context helps users understand if metrics are improving

Related Components#

• Timeline - For temporal data visualization
• FeatureGrid - For feature comparison
• ComparisonTable - For detailed comparisons

TypeScript Types#

interface UnifiedMetric {
  label: string;
  value: string | number;
  icon?: string | 'trending' | 'users' | 'dollar' | 'target' | 'clock' | 'zap';
  color?: 'blue' | 'green' | 'purple' | 'red' | 'yellow' | 'indigo' | 'gray';
  trend?: string;
  trendDirection?: 'up' | 'down' | 'neutral';
  description?: string;
  tooltip?: string;
}

interface UnifiedMetricsProps {
  title?: string;
  metrics: UnifiedMetric[];
  layout?: 'grid' | 'horizontal' | 'vertical';
  columns?: 1 | 2 | 3 | 4;
  variant?: 'default' | 'card' | 'minimal';
  size?: 'sm' | 'md' | 'lg';
  showIcons?: boolean;
  showTrends?: boolean;
  showDescriptions?: boolean;
  className?: string;
}