StatCard

PopularPro

Statistics display card with trend indicator.

displayanalyticsdashboard

Import

import { StatCard } from "@/components/ui";

Basic Usage

StatCard Preview

Total Revenue

$45,231

+20.1%

Users

2,350

+10.5%

Sales

12,234

-3.2%

Growth

+573

+8.1%

Code

tsx

<StatCard
  title="Total Revenue"
  value="$45,231.89"
  change={12.5}
  trend="up"
  icon="DollarSign"
/>

Grid Layout

Common dashboard layout

1<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
2  <StatCard
3    title="Total Revenue"
4    value="$45,231.89"
5    change={12.5}
6    trend="up"
7    icon="DollarSign"
8  />
9  <StatCard
10    title="Subscriptions"
11    value="+2,350"
12    change={-4.3}
13    trend="down"
14    icon="Users"
15  />
16  <StatCard
17    title="Sales"
18    value="+12,234"
19    change={8.2}
20    trend="up"
21    icon="CreditCard"
22  />
23  <StatCard
24    title="Active Now"
25    value="+573"
26    change={2.1}
27    trend="up"
28    icon="Activity"
29  />
30</div>

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring