Metric Card

Monthly Revenue

+12%vs last month

Active Users

+24%

Conversion Rate

0.0%

-2%vs last week

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/metric-card.json

Usage

import { MetricCard } from '@/components/matos-ui/metric-card'

<MetricCard
  label="Monthly Revenue"
  value={42850}
  prefix="R$ "
  trend={{ value: 12, label: 'vs previous month' }}
  sparkline={[2400, 1398, 3200, 2780, 3490, 4000, 4200]}
  footer={<span className="text-xs text-muted-foreground">Updated now</span>}
/>

Reference

MetricCard Props

Prop	Type	Default	Description
`label`	`string`	—	Label shown in the card header.
`value`	`number`	—	Main numeric value (animated).
`prefix`	`string?`	—	Value prefix (e.g., `R$`).
`suffix`	`string?`	—	Value suffix (e.g., `%`).
`decimals`	`number`	`0`	Decimal places.
`trend`	`{ value, label? }?`	—	Trend badge (positive/negative).
`sparkline`	`number[]?`	—	Data for the sparkline chart.
`footer`	`ReactNode?`	—	Footer content.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Maximum card width.

Exported subcomponents

Component	Description
`AnimatedNumber`	Number with a spring counting animation.
`TrendBadge`	Colored badge with arrow and percentage.
`Sparkline`	SVG chart with a smooth line, area, and end-point marker.

Also exported: metricCardVariants and the MetricCardProps type.