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 signed delta. Pair with trendLabel for context, or set trendStyle="badge" for a pill badge instead of the default mono text.

Revenue

$18,400

+8.1%vs last month

Errors

15%vs last month

{/* Positive trend — quiet mono delta (default) */}
<StatCard title="Revenue" value="$18,400" trend={8.1} trendLabel="vs last month" />

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

With sparkline

Pass sparkline as a number array to render a compact trend line next to the delta. Its colour follows the trend direction.

Revenue

$128,402

+12.4%

Conv. rate

3.42%

-0.6%

<StatCard title="Revenue" value="$128,402" trend={12.4} sparkline={[12, 18, 22, 20, 28, 34, 32, 38, 42]} />
<StatCard title="Conv. rate" value="3.42%" trend={-0.6} sparkline={[30, 28, 32, 26, 24, 28, 22, 20, 18]} />

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>
}
/>

Props

Prop	Type	Default	Description
`title`	`string`	—	Metric label rendered above the value
`value`	`ReactNode`	—	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
`trendStyle`	`'text' \| 'badge'`	`'text'`	Renders the trend as quiet mono text or a pill badge
`sparkline`	`number[]`	—	Compact trend line rendered next to the delta; colour follows the trend direction
`icon`	`ReactNode`	—	Icon rendered top-right inside the card
`className`	`string`	—	Additional Tailwind classes on the card
`prefix`	`string`	—	Decorative label rendered above the title (e.g. "01", "02")
`titleClassName`	`string`	—	Additional classes applied to the title element
`valueClassName`	`string`	—	Additional classes applied to the value element