Metric

Metric is a compact component for displaying key performance indicators (KPIs) with optional change indicators.

Basic Usage

<Metric 
  label="Uptime" 
  value="99.98%" 
  change="+0.2%" 
  changeType="positive" 
/>

Uptime

99.98%

+0.2%

Change Types

Requests

124k

+12%

Errors

47

-8%

Latency

124ms

—

Props

Prop	Type	Default	Description
label	string	—	Label above the value
value	string	—	Main metric value
change	string	—	Change indicator text
changeType	'positive' | 'negative' | 'neutral'	'neutral'	Color treatment of change
icon	ReactNode	—	Optional icon

Best Practices

• Use 3–6 metrics per dashboard section
• Pair with Statistic for larger headline numbers
• Keep value extremely scannable

Related Components

• Statistic — Larger, more prominent version
• Card — Excellent container for groups of metrics

Next: Statistic →