StatsCard

Bold gradient card for hero stats. Use it for the most important KPIs on a dashboard — when you want the metric to stand out.

Examples

All variants

Each variant uses gradients built from CSS-vars — so they automatically adapt to your theme.

MRR

R$ 48,219

Customers

1,284

Churn

2.1%

Conversion

3.8%

NPS

Open tickets

<StatsCard variant="info" label="MRR" value="R$ 48,219" icon={<TrendingUp size={20} />} />
<StatsCard variant="success" label="Customers" value="1,284" icon={<Users size={20} />} />
<StatsCard variant="danger" label="Churn" value="2.1%" icon={<CreditCard size={20} />} />
<StatsCard variant="warning" label="Conversion" value="3.8%" icon={<Zap size={20} />} />
<StatsCard variant="purple" label="NPS" value="72" icon={<Star size={20} />} />

StatsCard vs MetricCard

StatsCard is the bold, gradient version. MetricCard is the quiet, neutral card with change indicator. Pick by visual weight needed.

MRR

R$ 48,219

← bold hero card; quieter MetricCard available for table-like dashboards

{/* StatsCard — hero, gradient */}
<StatsCard variant="info" label="MRR" value="R$ 48,219" />

{/* MetricCard — quiet, with change */}
<MetricCard
  icon={TrendingUp}
  title="MRR"
  value="R$ 48,219"
  change="+12%"
  changeType="positive"
/>

API Reference

Props of the StatsCard component.

Prop	Type	Default	Description
`label*`	`string`	—	Short title above the value.
`value*`	`string \| number`	—	Big number/value.
`variant`	`'success' \| 'danger' \| 'info' \| 'warning' \| 'primary' \| 'purple' \| 'green' \| 'amber' \| 'red'`	`'primary'`	—
`color`	`string`	—	Shorthand: green / amber / orange / red / blue / gray. Maps to a variant.
`icon`	`ReactNode`	—	—