MetricCard
Card displaying a metric with label, value, optional unit, subtitle, and badge.
Preview
Usage
import { MetricCard } from '@ramtt/ui'
<MetricCard label="Avg power" value={245} unit="W" />
<MetricCard
label="TSS"
value={312}
subtitle="+8% vs last week"
subtitleColor="positive"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Metric label |
| value* | string | number | — | Primary value |
| unit | string | — | Unit suffix |
| subtitle | string | — | Subtitle text below value |
| subtitleColor | 'positive' | 'negative' | 'warning' | 'default' | 'default' | Subtitle color |
| badge | { label: string; color: string } | — | Top-right badge |
| compact | boolean | — | Compact layout |