UnifiedMetrics

Consolidated component for displaying metrics, statistics, and KPIs

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.

Bundle Size Reduction

By consolidating multiple metrics components into one, we achieved a 46% reduction in bundle size for metrics-related code.

Basic Usage

📄Mdx

<UnifiedMetrics
  title="Key Performance Metrics"
  metrics={[
    {
      label: "Active Users",
      value: "10,000+",
      icon: "users",
      color: "blue",
      trend: "+12%",
      trendDirection: "up"
    },
    {
      label: "Revenue",
      value: "$2.5M",
      icon: "dollar",
      color: "green",
      trend: "+25%",
      trendDirection: "up"
    },
    {
      label: "Response Time",
      value: "< 100ms",
      icon: "zap",
      color: "purple",
      trend: "-15%",
      trendDirection: "down",
      description: "Average API response time"
    }
  ]}
  columns={3}
  variant="card"
/>

Props

UnifiedMetricsProps

Prop	Type	Default	Description
`title`	`string`	`"Key Metrics"`	Title displayed above metrics
`metrics`	`UnifiedMetric[]`	required	Array of metric objects
`layout`	`'grid' \| 'horizontal' \| 'vertical'`	`'grid'`	Layout style
`columns`	`1 \| 2 \| 3 \| 4`	`3`	Number of columns in grid layout
`variant`	`'default' \| 'card' \| 'minimal'`	`'default'`	Visual style variant
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of metric display
`showIcons`	`boolean`	`true`	Show/hide icons
`showTrends`	`boolean`	`true`	Show/hide trend indicators
`showDescriptions`	`boolean`	`true`	Show/hide metric descriptions
`className`	`string`	`''`	Additional CSS classes

UnifiedMetric Object

Property	Type	Required	Description
`label`	`string`	✅	Metric label/name
`value`	`string \| number`	✅	Metric value
`icon`	`string \| 'trending' \| 'users' \| 'dollar' \| 'target' \| 'clock' \| 'zap'`	❌	Icon to display
`color`	`'blue' \| 'green' \| 'purple' \| 'red' \| 'yellow' \| 'indigo' \| 'gray'`	❌	Color theme
`trend`	`string`	❌	Trend value (e.g., "+12%")
`trendDirection`	`'up' \| 'down' \| 'neutral'`	❌	Trend direction indicator
`description`	`string`	❌	Additional description text
`tooltip`	`string`	❌	Tooltip text (future feature)

Variants

Default Variant

Standard metrics display with white background:

📄Mdx

<UnifiedMetrics
  variant="default"
  metrics={[
    { label: "Total Projects", value: "50+", icon: "target", color: "blue" },
    { label: "Years Experience", value: "10+", icon: "clock", color: "green" },
    { label: "Technologies", value: "25+", icon: "zap", color: "purple" }
  ]}
/>

Card Variant

Elevated cards with colored backgrounds:

📄Mdx

<UnifiedMetrics
  variant="card"
  metrics={[
    { label: "API Calls", value: "1M/day", icon: "trending", color: "blue" },
    { label: "Uptime", value: "99.9%", icon: "target", color: "green" }
  ]}
/>

Minimal Variant

Clean, minimal design for subtle metrics display:

📄Mdx

<UnifiedMetrics
  variant="minimal"
  size="sm"
  metrics={[
    { label: "Active", value: "24/7", color: "gray" },
    { label: "Status", value: "Healthy", color: "green" }
  ]}
/>

Sizes

Control the size of metrics display:

📄Mdx

<!-- Small -->
<UnifiedMetrics size="sm" metrics={[...]} />

<!-- Medium (default) -->
<UnifiedMetrics size="md" metrics={[...]} />

<!-- Large -->
<UnifiedMetrics size="lg" metrics={[...]} />

Layouts

Grid Layout (Default)

📄Mdx

<UnifiedMetrics
  layout="grid"
  columns={3}
  metrics={[...]}
/>

Horizontal Layout

📄Mdx

<UnifiedMetrics
  layout="horizontal"
  metrics={[...]}
/>

Vertical Layout

📄Mdx

<UnifiedMetrics
  layout="vertical"
  metrics={[...]}
/>

Icons

Available built-in icons:

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

📄Mdx

<UnifiedMetrics
  metrics={[
    { label: "Users", value: "10K", icon: "users" },
    { label: "Revenue", value: "$1M", icon: "dollar" },
    { label: "Speed", value: "Fast", icon: "zap" }
  ]}
/>

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

📄Mdx

<UnifiedMetrics
  metrics={[
    { label: "Success", value: "100%", color: "green" },
    { label: "Pending", value: "5", color: "yellow" },
    { label: "Failed", value: "0", color: "red" }
  ]}
/>

Trends

Add trend indicators to show metric changes:

📄Mdx

<UnifiedMetrics
  showTrends={true}
  metrics={[
    {
      label: "Revenue",
      value: "$1.5M",
      trend: "+25%",
      trendDirection: "up",
      description: "Compared to last quarter"
    },
    {
      label: "Load Time",
      value: "1.2s",
      trend: "-30%",
      trendDirection: "down",
      description: "Performance improved"
    },
    {
      label: "Traffic",
      value: "100K",
      trend: "0%",
      trendDirection: "neutral",
      description: "Stable traffic"
    }
  ]}
/>

Migration from Old Components

From MetricsCard

📄Mdx

<!-- Old -->
<MetricsCard
  title="Performance"
  metrics={[...]}
/>

<!-- New -->
<UnifiedMetrics
  title="Performance"
  variant="default"
  metrics={[...]}
/>

From MetricsGrid

📄Mdx

<!-- Old -->
<MetricsGrid
  metrics={[...]}
  columns={3}
  showTrends={true}
/>

<!-- New -->
<UnifiedMetrics
  metrics={[...]}
  columns={3}
  variant="card"
  showTrends={true}
/>

From StatsGrid

📄Mdx

<!-- Old -->
<StatsGrid
  stats={[...]}
  columns={3}
  size="md"
/>

<!-- New -->
<UnifiedMetrics
  metrics={[...]}
  columns={3}
  variant="minimal"
  size="md"
/>

Real-World Examples

Project Metrics

📄Mdx

<UnifiedMetrics
  title="Project Impact"
  variant="card"
  columns={3}
  metrics={[
    {
      label: "Lines of Code",
      value: "50K+",
      icon: "target",
      color: "blue",
      description: "Production codebase"
    },
    {
      label: "Test Coverage",
      value: "95%",
      icon: "trending",
      color: "green",
      trend: "+10%",
      trendDirection: "up",
      description: "Unit + integration tests"
    },
    {
      label: "Build Time",
      value: "< 2min",
      icon: "clock",
      color: "purple",
      trend: "-40%",
      trendDirection: "down",
      description: "Optimized build pipeline"
    }
  ]}
/>

Performance Dashboard

📄Mdx

<UnifiedMetrics
  title="System Performance"
  variant="default"
  columns={4}
  size="sm"
  metrics={[
    { label: "CPU", value: "45%", color: "green", icon: "zap" },
    { label: "Memory", value: "2.1 GB", color: "blue", icon: "target" },
    { label: "Requests/s", value: "1.2K", color: "purple", icon: "trending" },
    { label: "Uptime", value: "99.9%", color: "green", icon: "clock" }
  ]}
/>

Business KPIs

📄Mdx

<UnifiedMetrics
  title="Q4 Business Metrics"
  variant="card"
  columns={2}
  size="lg"
  metrics={[
    {
      label: "Revenue",
      value: "$2.5M",
      icon: "dollar",
      color: "green",
      trend: "+25%",
      trendDirection: "up",
      description: "Year-over-year growth"
    },
    {
      label: "Customer Satisfaction",
      value: "4.8/5.0",
      icon: "users",
      color: "blue",
      trend: "+0.3",
      trendDirection: "up",
      description: "Average rating from 5,000+ reviews"
    }
  ]}
/>

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

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

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

TypeScript Types

🔷TypeScript

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
}

Use Ctrl + ← / → to navigate

First page

Last page

Back to Documentation Home