MetricCard

Card for KPIs with icon, big number, change indicator, and a semantic color.

Examples

Colors

Each color uses a semantic palette that supports dark mode.

MRRR$ 48,219

+12%

Active customers1,284

+38

Churn2.1%

-0.4%

NPS72

Conversion3.8%

+0.2%

Open tickets14

-3

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

<MetricCard
  icon={Users}
  title="Active customers"
  value="1,284"
  change="+38"
  changeType="positive"
  color="green"
/>

Loading state

MRR

<MetricCard icon={TrendingUp} title="MRR" loading />

API Reference

Props of the MetricCard component.

Prop	Type	Default	Description
`title*`	`string`	—	—
`value`	`string`	—	—
`description`	`string`	—	—
`change`	`string`	—	Variation label, e.g. "+12%".
`changeType`	`'positive' \| 'negative' \| 'neutral'`	—	—
`icon*`	`LucideIcon`	—	—
`color`	`MetricCardColor`	—	One of: 'blue' \| 'green' \| 'indigo' \| 'pink' \| 'purple' \| 'red' \| 'teal' \| 'violet' \| 'amber' \| 'emerald' \| 'slate'
`loading`	`boolean`	`false`	—
`onClick`	`() => void`	—	—