Data displayMetric

Metric

A single number, a label, and an optional delta. Used in dashboards, study reports, and case study hero blocks.

3 sizesOptional deltaTabular nums

Demo

Default

Started the protocol

3,539

+12% from last week

Completed transfer

412

-3% from last week

Reached end

stable

Anatomy

Label: 0.6875 rem, 0.18 em tracking, uppercase, --muted-foreground
Value: font-sans weight 500, line-height 1, letter-spacing -0.02 em, --foreground
Delta: 0.75 rem, --muted-foreground
All numbers use font-variant-numeric: tabular-nums
Vertical rhythm: 4 px gap between label → value, 4 px between value → delta

Implementation

metric.tsx

interface MetricProps {
  value: string | number
  label: string
  delta?: string
  size?: "sm" | "md" | "lg"
}

export function Metric({ value, label, delta, size = "md" }: MetricProps) {
  return (
    <div className={`ds-metric ds-metric--${size}`}>
      <p className="ds-metric__label">{label}</p>
      <p className="ds-metric__value">{value}</p>
      {delta ? <p className="ds-metric__delta">{delta}</p> : null}
    </div>
  )
}

Props

Prop	Type	Default	Description
`value`	`string \| number`	`None`	Required: the value
`label`	`string`	`None`	Required: the label
`delta`	`string`	`None`	Optional delta indicator
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Number size