sprõut
ComponentsData display

Metric

Shows one number that matters, such as memory used or weekly signups, with how it changed and a small trend. Put a few in a row for a summary. For many numbers, use Table.

Memory used
11.2 GB
Up 0.4 GBvs 5 min ago
Of 16 GB
Weekly active users
2,481
Up 12%vs last week
Open incidents
0
No changesince yesterday
Week
38
Thursday, 18 September 2026

Usage

Metric usageTSX
import { Metric } from "@tulipfarm/sprout/metric";
import { Sparkline } from "@tulipfarm/sprout/chart";

<Metric
  label="Memory used"
  value="11.2 GB"
  change={{ value: "0.4 GB", direction: "up", tone: "negative", label: "vs 5 min ago" }}
  trend={<Sparkline values={samples} title="Memory used trend" area />}
  caption="Of 16 GB"
/>

  • label and value: what is measured and its formatted value.
  • change: value as text, direction (up, down orflat), an optional tone (positive, negative orneutral) and an optional label such as “vs last week”.
  • trend: any small chart, usually a Sparkline.
  • caption: a line under the value, such as when it was read.

Accessibility

The direction is an arrow and a word. The arrow is hidden from screen readers, which hear “Up 0.4 GB” instead. A flat change reads “No change”. The tone only tints the change, so color is never the only signal.

Theme tokens

The label and caption use --sprout-muted, the value --sprout-text with tabular figures. A positive change uses --sprout-success and a negative one --sprout-danger.