Stat Cards
A grid of KPI cards with trend indicators and metric values.
Card
Preview
Total Revenue
$45,231.89
+20.1%
from last month
Active Users
2,350
+180.1%
from last month
Orders
12,234
+19%
from last month
Conversion Rate
2.4%
-4.3%
from last month
Code
<div class="w-full max-w-5xl grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<BbCard>
<BbCardContent class="pt-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-muted-foreground">Total Revenue</p>
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-emerald-500/10">
<!-- dollar-sign icon SVG -->
</div>
</div>
<div class="mt-2">
<h2 class="text-2xl font-bold">$45,231.89</h2>
<div class="flex items-center mt-1 text-xs">
<!-- trending-up icon SVG -->
<span class="text-emerald-500 font-medium">+20.1%</span>
<span class="text-muted-foreground ml-1">from last month</span>
</div>
</div>
</BbCardContent>
</BbCard>
<BbCard>
<BbCardContent class="pt-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-muted-foreground">Active Users</p>
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-blue-500/10">
<!-- users icon SVG -->
</div>
</div>
<div class="mt-2">
<h2 class="text-2xl font-bold">2,350</h2>
<div class="flex items-center mt-1 text-xs">
<!-- trending-up icon SVG -->
<span class="text-emerald-500 font-medium">+180.1%</span>
<span class="text-muted-foreground ml-1">from last month</span>
</div>
</div>
</BbCardContent>
</BbCard>
<BbCard>
<BbCardContent class="pt-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-muted-foreground">Orders</p>
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-orange-500/10">
<!-- shopping-cart icon SVG -->
</div>
</div>
<div class="mt-2">
<h2 class="text-2xl font-bold">12,234</h2>
<div class="flex items-center mt-1 text-xs">
<!-- trending-up icon SVG -->
<span class="text-emerald-500 font-medium">+19%</span>
<span class="text-muted-foreground ml-1">from last month</span>
</div>
</div>
</BbCardContent>
</BbCard>
<BbCard>
<BbCardContent class="pt-6">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-muted-foreground">Conversion Rate</p>
<div class="flex items-center justify-center w-8 h-8 rounded-full bg-violet-500/10">
<!-- percent icon SVG -->
</div>
</div>
<div class="mt-2">
<h2 class="text-2xl font-bold">2.4%</h2>
<div class="flex items-center mt-1 text-xs">
<!-- trending-down icon SVG -->
<span class="text-red-500 font-medium">-4.3%</span>
<span class="text-muted-foreground ml-1">from last month</span>
</div>
</div>
</BbCardContent>
</BbCard>
</div>