Stat Card
A single KPI on a dashboard: a label, one big value, and an optional trend whose sign picks the arrow and the color.
import from ~/components/ui/stat-card
A dashboard row
Portfolio value
$284.6k
12.4% vs last quarter
Max drawdown
8.6%
2.1% vs last quarter
Open positions
14
positive, negative, no trend
Three or four across is the shape. The delta's sign picks the arrow and the color, and nothing is passed for that.
Positive trend
Win rate
61.2%
4.8% vs last 90 days
delta > 0
Up arrow, success color. The deltaLabel is what makes the number mean something: 12.4% against what?
Negative trend
Avg holding period
6.4 days
9.3% vs last quarter
delta < 0
Down arrow, destructive color. Down is not automatically bad, so let the label carry the reading.
Flat trend
Open risk
2.4%
0% vs last quarter
delta = 0
A flat rule and muted text, no arrow and no color. The metric was measured and it did not move, which is a reading in its own right, not a gain of nothing.
No trend
Active strategies
7
delta omitted
A count with nothing to compare against. Omitting delta drops the whole trend line, which is a different statement from a flat zero.
Rules
Do
Don't