Skip to content

MetricCard

MetricCard presents one result metric with an optional unit, delta, and short caption. It is useful for paper talks where one number needs to stay readable without taking over the slide.

MetricCard example

Basic Usage

markdown
<MetricCard
  label="Accuracy"
  value="94.7"
  unit="%"
  delta="+3.2"
  caption="Five-seed average against the supervised baseline"
  variant="success"
/>

With Body Content

markdown
<MetricCard label="Latency" value="18" unit="ms" delta="-12%" variant="info">
Measured on one A100 with batch size 32.
</MetricCard>

Props

PropTypeDefaultDescription
labelstring-Short metric label
valuestring | numberrequiredMain value
unitstring-Unit shown after the value
deltastring-Comparison or change note
captionstring-Supporting note below the value
variantstring'primary'primary, success, warning, danger, or info
trendstring'flat'up, down, or flat delta semantics
compactbooleanfalseReduce spacing for dense slides