Stat Card · paneui

Recurring revenue

12.4%

$48,210

vs. last month

Churn rate

0.4 pts

2.4%

Trailing 90 days

Installation

pnpm dlx shadcn@latest add @paneui/stat-card

Usage

import {
  StatCard,
  StatCardDelta,
  StatCardFooter,
  StatCardHeader,
  StatCardHint,
  StatCardLabel,
  StatCardSparkline,
  StatCardValue,
} from "@/components/ui/stat-card"

<StatCard>
  <StatCardHeader>
    <StatCardLabel>Recurring revenue</StatCardLabel>
    <StatCardDelta value={12.4} />
  </StatCardHeader>
  <StatCardValue>$48,210</StatCardValue>
  <StatCardFooter>
    <StatCardHint>vs. last month</StatCardHint>
    <StatCardSparkline values={trend} />
  </StatCardFooter>
</StatCard>

Composition

StatCard
├── StatCardHeader
│   ├── StatCardLabel
│   └── StatCardDelta
├── StatCardValue
└── StatCardFooter
    ├── StatCardHint
    └── StatCardSparkline

Examples

With Number Ticker

Use for live numbers that change while the page is open.

Tone

StatCardDelta takes its tone from the sign, success for a rise, destructive for a fall and neutral at zero. Pass invert for metrics where up is bad (churn, latency, errors). StatCardSparkline follows the same tone unless you give it a text colour.

API Reference

StatCard

Raised card (rounded-xl, shadow-raised, 16px padding) that shares the delta's tone with the sparkline. Also accepts every prop of div.

data-tone: positive, negative or neutral, from the delta.

Data attribute	Description
data-tone	`positive`, `negative` or `neutral`, from the delta.

StatCardDelta

Also accepts every prop of Badge.

value*: number; The change; its sign sets the arrow.
unit= "%": string; Suffix after the number.
invert= false: boolean; A rise is bad.
precision= 1: number; Decimal places.

Prop	Type	Default	Description
value*	number	—	The change; its sign sets the arrow.
unit	string	"%"	Suffix after the number.
invert	boolean	false	A rise is bad.
precision	number	1	Decimal places.

StatCardSparkline

A 96 × 36 sparkline tinted by the card's tone. Also accepts every prop of Sparkline.

StatCardLabel, StatCardValue, StatCardHint, StatCardHeader, StatCardFooter

Layout parts. The value is text-2xl semibold with tabular numbers. Also accepts every prop of div.