Stat and metric
A stat is one proof number beside a spark rule; a metric is the same idea in a bordered tile with a caption.
42
Stat
A short note
Controls
Code
import { StatBlock } from "@/components/ui/kit/data";
<StatBlock value="42" label="Stat" sub="A short note" />Every state
42
Stat
A short note
Metric
9.1
What the number means.
Usage
Tokens it uses
| --ink | … |
|---|---|
| --muted | … |
| --faint | … |
| --spark | … |
| --line | … |
| --surface | … |
| --font-display | … |
| --font-label | … |
Values are read live from the stylesheet, so they follow the site theme.