StatCard

A metric card for displaying KPIs with trend indicators.

Basic

Displays a labelled metric value. Add description for supporting context below the number.

Total users

4,821

Registered accounts

<StatCard title="Total users" value="4,821" description="Registered accounts" />

With trend

Pass trend as a positive or negative number to render a colour-coded badge. Pair with trendLabel for context.

Revenue

$18,400

8.1%vs last month

Errors

15%vs last month

{/* Positive trend — green badge */}
<StatCard title="Revenue" value="$18,400" trend={8.1} trendLabel="vs last month" />

{/* Negative trend — red badge */}
<StatCard title="Errors" value="23" trend={-15} trendLabel="vs last month" />

With icon

Pass any React node to icon to display it top-right inside the card.

Active sessions

312

4.2%vs last month

<StatCard
title="Active sessions"
value="312"
trend={4.2}
trendLabel="vs last month"
icon={
  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
    <circle cx="9" cy="7" r="4" />
    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
  </svg>
}
/>

Variants

Use variant to add a coloured left border accent that signals the nature of the metric.

Default

100

Primary

100

Success

100

Warning

100

Error

100

<StatCard title="Default" value="100" />
<StatCard title="Primary" value="100" variant="primary" />
<StatCard title="Success" value="100" variant="success" />
<StatCard title="Warning" value="100" variant="warning" />
<StatCard title="Error" value="100" variant="error" />

Props

Prop	Type	Default	Description
`title`	`string`	—	Metric label rendered above the value
`value`	`string \| number`	—	Primary metric value displayed in large type
`description`	`string`	—	Supporting text rendered below the value
`trend`	`number`	—	Percentage change — positive renders green, negative renders red
`trendLabel`	`string`	—	Contextual label shown next to the trend badge
`icon`	`ReactNode`	—	Icon rendered top-right inside the card
`variant`	`'default' \| 'primary' \| 'success' \| 'warning' \| 'error'`	`'default'`	Adds a coloured left border accent to signal metric status
`className`	`string`	—	Additional Tailwind classes on the card