Docs/MetricCard

MetricCard

Compact card for displaying KPI metrics with change indicators.

Usage

tsx

1import { MetricCard } from '@storm-ds/ui'
2
3<MetricCard
4  label="Total Revenue"
5  value="$48,295"
6  change="+12.5%"
7  changeLabel="vs last month"
8/>

Basic

Active Users

1,024

tsx

1<MetricCard label="Active Users" value="1,024" />

With Change

Revenue

$48,295

+12.5% vs last month

Churn

3.2%

-0.4% vs last month

tsx

1<MetricCard label="Revenue" value="$48,295" change="+12.5%" changeLabel="vs last month" />
2<MetricCard label="Churn" value="3.2%" change="-0.4%" changeLabel="vs last month" />

Grid Layout

Users

2,847

+8%

Revenue

$48k

+12%

Churn

1.2%

-0.3%

tsx

1<div className="grid grid-cols-3 gap-4">
2  <MetricCard label="Users" value="2,847" change="+8%" />
3  <MetricCard label="Revenue" value="$48k" change="+12%" />
4  <MetricCard label="Churn" value="1.2%" change="-0.3%" />
5</div>

Props

Prop	Type	Default	Description
label	string	-	Metric label (required)
value	string	-	Metric value (required)
change	string	-	Change indicator (+ for green, - for red)
changeLabel	string	-	Text after change value
className	string	-	Custom classes

Use with AI

Create metric displays using Storm UI's MetricCard. Import: `import { MetricCard } from '@storm-ds/ui'`. Props: label (required), value (required), change (prefix with + for green, - for red), changeLabel. Use in grids for dashboards. Example: `<MetricCard label="Revenue" value="$48,295" change="+12.5%" changeLabel="vs last month" />`

HoverCard

Empty