MetricCard

Enhanced KPI display with trends

Overview

MetricCard is an enhanced KPI display with sparkline visualizations, trend indicators, and drill-down navigation. Perfect for displaying key metrics at the top of dashboards.

Features

Sparkline trend visualization
Change indicator with auto-coloring
Status-based accent colors (left border)
Comparison to previous period
Clickable for drill-down navigation
Loading skeleton state

Examples

Basic Metrics

With change indicators

Active Users

1,432

+12%vs last month

Sessions

8,547

+5.2%vs last period

Bounce Rate

32.4%

-2.1%vs last period

Avg Duration

4m 32s

+15%vs last period

With Sparklines

Inline trend visualization

Revenue

$24.5k

+8.2%vs last period

Churn Rate

2.4%

-0.3%vs last period

Retention

94.2%

+0.1%vs last period

Status Variants

Left border accent colors

Health Score

92%

Warning Items

Critical Issues

Total Items

156

Clickable Cards

With drill-down navigation

Pending Tasks

-5vs last period

Completed Today

+8vs last period

Loading State

Skeleton during data fetch

With Previous Value

Showing previous period value

Monthly Revenue

$45,230

Previous: $42,100

Subscribers

12,480

Previous: 11920

Props Reference

Prop	Type	Default	Description
`label`	`string`	`required`	Metric label
`value`	`string \| number`	`required`	Metric value
`change`	`string`	`-`	Change indicator (e.g., "+12%")
`changeLabel`	`string`	`-`	Label for change period
`sparklineData`	`number[]`	`-`	Data for sparkline chart
`previousValue`	`string \| number`	`-`	Previous period value
`status`	`"success" \| "warning" \| "destructive" \| "neutral"`	`-`	Status-based accent color
`href`	`string`	`-`	Navigation URL
`onDrillDown`	`function`	`-`	Click handler for drill-down
`isLoading`	`boolean`	`false`	Show loading skeleton

Usage

import { MetricCard } from '@/ui/components/charts';

// Basic metric with change indicator
<MetricCard
  label="Active Users"
  value={1432}
  change="+12%"
  changeLabel="vs last month"
/>

// With sparkline trend
<MetricCard
  label="Total Revenue"
  value="$24.5k"
  change="+8.2%"
  sparklineData={[10, 15, 12, 18, 22, 19, 25]}
/>

// Status-based accent
<MetricCard
  label="Health Score"
  value="92%"
  status="success"
  href="/health/details"
/>

// With navigation
<MetricCard
  label="Pending Tasks"
  value={47}
  change="-5"
  status="warning"
  href="/tasks?status=pending"
/>

Prop

Type

Default

Description

label

string

required

Metric label

value

string | number

required

Metric value

change

string

-

Change indicator (e.g., "+12%")

changeLabel

string

-

Label for change period

sparklineData

number[]

-

Data for sparkline chart

previousValue

string | number

-

Previous period value

status

"success" | "warning" | "destructive" | "neutral"

-

Status-based accent color

href

string

-

Navigation URL

onDrillDown

function

-

Click handler for drill-down

isLoading

boolean

false

Show loading skeleton

import { MetricCard } from '@/ui/components/charts'; // Basic metric with change indicator <MetricCard label="Active Users" value={1432} change="+12%" changeLabel="vs last month" /> // With sparkline trend <MetricCard label="Total Revenue" value="$24.5k" change="+8.2%" sparklineData={[10, 15, 12, 18, 22, 19, 25]} /> // Status-based accent <MetricCard label="Health Score" value="92%" status="success" href="/health/details" /> // With navigation <MetricCard label="Pending Tasks" value={47} change="-5" status="warning" href="/tasks?status=pending" />