Components

Stat card

A single KPI on a bordered card — a Stat (label, value, trend) over an optional Sparkline and footnote. The unit a dashboard's headline-metrics row is built from.

Install

npx shadcn@latest add @alix/statCard

Preview

Net revenue$248.6M
+12.4%vs. FY24
Target $240M · beat by 3.6%

Usage

<StatCard
  label="Net revenue"
  value="$248.6M"
  delta={<Delta value="+12.4%" direction="up" intent="positive" />}
  caption="vs. FY24"
  sparkline={<Sparkline data={[210, 218, 224, 230, 241, 248]} />}
  footer="Target $240M · beat by 3.6%"
/>

Examples

01

Value size scale

Use the size prop to tune the value hierarchy without changing the card structure.

Open risks14
-3this week
Pipeline$84.2M
+6.8%vs. plan
Utilisation87%
+2ptvs. Q2
<Grid columns={3} gap="sm">
  <StatCard
    size="sm"
    label="Open risks"
    value="14"
    delta={<Delta value="-3" direction="down" intent="positive" size="sm" />}
    caption="this week"
  />
  <StatCard
    label="Pipeline"
    value="$84.2M"
    delta={<Delta value="+6.8%" direction="up" intent="positive" />}
    caption="vs. plan"
  />
  <StatCard
    size="lg"
    label="Utilisation"
    value="87%"
    delta={<Delta value="+2pt" direction="up" intent="positive" />}
    caption="vs. Q2"
  />
</Grid>
02

Centred score tile

Center alignment works for a single standalone score where the card is read as a tile.

Client confidence92
survey score
24 responses across the senior sponsor group.
<StatCard
  align="center"
  label="Client confidence"
  value="92"
  caption="survey score"
  footer="24 responses across the senior sponsor group."
/>
03

Dashboard scorecard row

Grid keeps a row of StatCards aligned while each card composes its own Delta and Sparkline slots.

Net revenue$248.6M
+12.4%vs. FY24
Gross margin31.4%
+1.2ptvs. plan
Utilisation87%
-2ptvs. target
Pipeline$84.2M
+6.8%next 90 days
<Grid columns={4} gap="sm">
  <StatCard
    label="Net revenue"
    value="$248.6M"
    delta={<Delta value="+12.4%" direction="up" intent="positive" />}
    caption="vs. FY24"
    sparkline={<Sparkline data={[210, 218, 224, 230, 241, 248]} />}
  />
  <StatCard
    label="Gross margin"
    value="31.4%"
    delta={<Delta value="+1.2pt" direction="up" intent="positive" />}
    caption="vs. plan"
    sparkline={<Sparkline data={[28, 29, 30, 30, 31, 31.4]} />}
  />
  <StatCard
    label="Utilisation"
    value="87%"
    delta={<Delta value="-2pt" direction="down" intent="negative" />}
    caption="vs. target"
    sparkline={<Sparkline data={[91, 90, 88, 89, 87, 87]} color="var(--destructive)" />}
  />
  <StatCard
    label="Pipeline"
    value="$84.2M"
    delta={<Delta value="+6.8%" direction="up" intent="positive" />}
    caption="next 90 days"
    sparkline={<Sparkline data={[62, 64, 71, 76, 79, 84]} />}
  />
</Grid>

When to use it

Use it for

  • Headline KPI strips at the top of finance, workforce, and engagement dashboards.
  • Metrics that need a trend slot, compact chart, and optional footnote in one bordered unit.
  • Grid rows where each card should keep the same internal rhythm even when labels wrap.

Reach for something else

  • A bare number inside a larger custom layout — use Stat instead.
  • Full chart analysis with axes or tooltips — use Chart inside Panel instead.
  • Row-by-row metric comparison — use DataTable instead.

Props

PropTypeDefaultDescription
label / value / captionReactNode—Metric name, the pre-formatted figure, and the comparison basis — data props forwarded to the inner Stat.
deltaReactNode—Trend slot — drop in a <Delta>.
sparklineReactNode—Mini-chart slot — drop in a <Sparkline>. Bottom-aligns so a row of cards keeps one baseline.
footerReactNode—Footnote under a hairline — a target, source, or sample size.
size"sm" | "md" | "lg""md"Value size, forwarded to Stat.

See also

StatDeltaSparklineGrid