MetricCard

Purpose

MetricCard displays a single metric with:

• Large icon in a colored circle
• Title, value, and optional subtitle
• Gradient background variants

When to use

Use MetricCard for:

• Dashboard KPIs
• Summary statistics
• Feature highlights
• Status indicators

Basic usage

import { MetricCard } from '@/shared/ui/components/metrics/MetricCard'
import { Users, TrendingUp, ShoppingCart, AlertCircle } from 'lucide-react'

<div className="grid grid-cols-4 gap-4">
  <MetricCard
    title="Total Users"
    value="12,345"
    subtitle="+12% from last month"
    icon={Users}
    variant="primary"
  />
  <MetricCard
    title="Revenue"
    value="$45,678"
    icon={TrendingUp}
    variant="success"
  />
  <MetricCard
    title="Orders"
    value="1,234"
    icon={ShoppingCart}
    variant="warning"
  />
  <MetricCard
    title="Issues"
    value="23"
    icon={AlertCircle}
    variant="danger"
  />
</div>

Props

Prop	Type	Default	Description
title	string	Required	Metric label
value	string | number	Required	Metric value
subtitle	string	-	Additional context
icon	LucideIcon	Required	Icon component
iconClassName	string	-	Icon container class
variant	Variant	'default'	Color variant
className	string	-	Card container class

Variants

Variant	Use case
default	Neutral metrics
primary	Primary/featured metrics
success	Positive indicators
warning	Attention needed
danger	Critical/negative metrics

Comparison with StatCard

Feature	MetricCard	StatCard
Icon size	Large (48px)	Small (20px)
Background	Gradient	Solid
Layout	Horizontal	Horizontal
Subtitle	Yes	No

Use MetricCard for prominent dashboard metrics.
Use StatCard for compact stat displays.

Notes

• Icons are passed as components, not elements
• Gradient backgrounds use semantic color tokens
• Built on the Card primitive