KPI Card

1<KpiCard
2  title="Revenue"
3  value="$45,231"
4  change={12}
5  trend="up"
6  icon={<DollarSign className="h-4 w-4" />}
7/>
8
9<KpiCard
10  title="Active Users"
11  value="2,350"
12  change={8}
13  trend="up"
14  icon={<Users className="h-4 w-4" />}
15/>

1<KpiCard
2  title="Bounce Rate"
3  value="42.5%"
4  change={5.2}
5  trend="down"
6  subtitle="vs. last week"
7  icon={<Activity className="h-4 w-4" />}
8/>

1<KpiCard
2  title="Conversion Rate"
3  value="3.2%"
4  change={0.1}
5  trend="neutral"
6  subtitle="no significant change"
7/>

1<KpiCard
2  title="Total Orders"
3  value="1,234"
4  subtitle="all time"
5/>

1<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
2  <KpiCard title="Revenue" value="$45,231" change={12} trend="up" />
3  <KpiCard title="Users" value="2,350" change={8} trend="up" />
4  <KpiCard title="Growth" value="+18%" change={3} trend="up" />
5  <KpiCard title="Active" value="573" change={2} trend="neutral" />
6</div>