StatCard
A single-metric KPI tile — Attio's Reports number cards.
The number/insight tile from Attio's Reports: a small muted label, a large value, and an optional up/down delta pill with a caption. Fills its container — pair it with a Card for the report look.
Preview
Estimated ARR$307B12%vs last month
Churn rate3.2%4%vs last month
Usage
import { StatCard } from "crisp";
<StatCard label="Estimated ARR" value="$307B" delta={12} caption="vs last month" />;API
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Small muted metric name. |
icon | ReactNode | — | Optional icon before the label. |
value | ReactNode | — | Headline value (already formatted). |
delta | number | — | Signed delta → coloured up/down pill. |
deltaSuffix | string | "%" | Suffix on the delta pill. |
caption | ReactNode | — | Text after the delta (e.g. "vs last month"). |