Stat Card

1<StatCard
2  title="Sales"
3  value="12,234"
4  change={20}
5  trend="up"
6  subtitle="from last week"
7  icon={<TrendingUp className="h-4 w-4" />}
8/>
9<StatCard
10  title="Returns"
11  value="342"
12  change={8}
13  trend="down"
14  subtitle="from last week"
15  icon={<Activity className="h-4 w-4" />}
16/>
17<StatCard
18  title="Pending"
19  value="1,234"
20  change={0}
21  trend="neutral"
22  subtitle="no change"
23  icon={<ShoppingCart className="h-4 w-4" />}
24/>

1<StatCard
2  title="Active Users"
3  value="2,350"
4  change={18}
5  trend="up"
6  subtitle="from yesterday"
7/>
8<StatCard
9  title="Bounce Rate"
10  value="42.3%"
11  change={5}
12  trend="down"
13  subtitle="from last month"
14/>

1<StatCard
2  title="Total Customers"
3  value="10,482"
4  icon={<Users className="h-4 w-4" />}
5/>
6<StatCard
7  title="Revenue"
8  value="$89,234"
9  icon={<DollarSign className="h-4 w-4" />}
10/>

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={20.1}
6    trend="up"
7    subtitle="from last month"
8    icon={<DollarSign className="h-4 w-4" />}
9  />
10  <StatCard
11    title="Subscriptions"
12    value="+2,350"
13    change={18}
14    trend="up"
15    subtitle="from last month"
16    icon={<Users className="h-4 w-4" />}
17  />
18  {/* More cards... */}
19</div>