Block

Stats Overview

Four key metric cards arranged in a responsive grid. Use for dashboards and summary views.

Uses:CardBadge

Playground

Preview
Total Revenue
$45,231

+20.1% from last month

Active Users
2,350

+15.3% from last month

New Signups
+573

+8.2% from last month

Churn Rate
3.2%

-1.4% from last month

Configure

Number of stat cards shown

Code

<div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
  {[
    { label: "Total Revenue", value: "$45,231", trend: "+20.1%", up: true },
    { label: "Active Users", value: "2,350", trend: "+15.3%", up: true },
    { label: "New Signups", value: "+573", trend: "+8.2%", up: true },
    { label: "Churn Rate", value: "3.2%", trend: "-1.4%", up: false },
  ].map((stat) => (
    <Card key={stat.label} className="shadow-xl">
      <CardHeader>
        <CardDescription>{stat.label}</CardDescription>
        <CardTitle className="text-2xl tabular-nums">{stat.value}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className={`text-xs ${stat.up ? "text-green-600 dark:text-green-400" : "text-destructive"}`}>
          {stat.trend} from last month
        </p>
      </CardContent>
    </Card>
  ))}
</div>