Stat Card

StatCard is a metric display card showing a label, large numeric value, and optional trend indicator. It includes a built-in loading skeleton state.

ExamplesCodeUsageChangelog

Basic usage

Total Production

4,820 t

Tailwind v4

<StatCard label="Total production" value="4,820 t" />

With trend (up)

Throughput

312 t/h

↑ 8.5vs last week

Tailwind v4

<StatCard
  label="Throughput"
  value="312 t/h"
  :trend="8.5"
  trend-label="vs last week"
/>

• Positive trend values show an upward arrow in green
• Negative trend values show a downward arrow in red
• A trend of 0 shows → 0 in neutral gray (no change)
• trend omitted entirely hides the trend row

With trend (down)

Downtime

2.4 hrs

↓ 12vs yesterday

Tailwind v4

<StatCard label="Downtime" value="2.4 hrs" :trend="-12" trend-label="vs yesterday" />

Loading state

Tailwind v4

<StatCard label="Production" value="—" :loading="true" />

When loading is true, three Skeleton blocks are shown in place of the label, value, and trend.

Grid layout example

Total Tons

4,820

↑ 3.2vs last week

Hours Run

18.5

↓ 1.2vs target

Fuel Used

642 L

Tailwind v4

<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
  <StatCard label="Total Tons" value="4,820" :trend="3.2" trend-label="vs last week" />
  <StatCard label="Hours Run" value="18.5" :trend="-1.2" trend-label="vs target" />
  <StatCard label="Fuel Used" value="642 L" />
  <StatCard label="Downtime" value="2h 15m" :loading="loading" />
</div>

Props

Prop	Type	Default	Description
label	string	—	Metric label (uppercase, muted)
value	string | number	—	Primary metric value
trend	number	—	Trend value — positive = up (success), negative = down (danger)
trendLabel	string	—	Contextual label next to the trend, e.g. "vs last week"
loading	boolean	false	Show skeleton placeholders