Data display

Stat card

A KPI tile with a mono label, a large value and an optional trend delta compared with last month.

Usage

Included in the GliaKit boilerplate. Import it where you need it:

tsx

import { StatCard } from "@/components/ui/card";

Rows of headline metrics at the top of a dashboard: revenue, active users, churn.
Showing a single number with how it moved since the previous period.

For values over time, pair the tiles with a Chart instead of adding more tiles.
For anything other than a monthly comparison, build a Card yourself: the comparison text is fixed to "vs last month".

Leave out delta for totals that have no comparison.

KPI tiles above a chart card, the most common dashboard layout.

Renders a Card with p-5. Does not spread other div props.

Prop	Type	Default	Description
label	string	-	Required. Short uppercase mono label above the value.
value	string	-	Required. The formatted metric, e.g. "$48,290". Pass it pre-formatted.
delta	string	-	Change since last month, e.g. "+12.5%". A leading + or - is stripped and replaced by the trend arrow. When omitted, the whole delta line is hidden.
trend	"up" \| "down" \| "flat"	-	Arrow and color of the delta: up is green with ↑, down is red with ↓. flat, or no trend, is muted with →.
className	string	-	Extra classes for the card.

Label, value and delta are plain text, read in that order.
Trend is shown by an arrow character and the delta text, not by color alone. Screen readers announce the arrow, for example "upwards arrow".
The delta always reads "vs last month"; make sure that matches the period your data covers.