Data Display

Metric Card

A compact KPI card for dashboards and summary panels.

Source

This is the component source that shadcn installs into a consuming project.

registry/default/metric-card/metric-card.tsx

import { TrendingUpIcon } from "lucide-react"

import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

type MetricCardProps = {
  label?: string
  value?: string
  change?: string
  description?: string
}

export function MetricCard({
  label = "Active users",
  value = "24,892",
  change = "+12.4%",
  description = "Compared with the previous period",
}: MetricCardProps) {
  return (
    <Card className="w-full max-w-sm">
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div className="flex flex-col gap-1">
            <CardDescription>{label}</CardDescription>
            <CardTitle className="text-3xl">{value}</CardTitle>
          </div>
          <Badge variant="secondary">
            <TrendingUpIcon data-icon="inline-start" />
            {change}
          </Badge>
        </div>
      </CardHeader>
      <CardContent>
        <p className="text-sm text-muted-foreground">{description}</p>
      </CardContent>
    </Card>
  )
}