<div class="max-w-7xl px-4 mx-auto">
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<x-ui.card>
<div class="flex items-center">
<div class="size-8 text-white flex items-center justify-center rounded-full bg-accent" role="img"
aria-label="Total Users icon">
<span class="iconify ph--users" aria-hidden="true"></span>
</div>
<h3 class="flex-1 flex text-fg-muted ml-3">Total Users</h3>
</div>
<div class="py-3 flex text-center justify-center font-semibold text-3xl text-fg">12,543</div>
<div class="flex justify-between items-center">
<p class="text-xs text-fg-muted flex-1 line-clamp-1">Total registered users</p>
<div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
role="img" aria-label="Trend indicator">
<span aria-hidden="true" class="iconify ph--trend-up"></span>
</div>
</div>
</x-ui.card>
<x-ui.card>
<div class="flex items-center">
<div class="size-8 text-white flex items-center justify-center rounded-full bg-primary" role="img"
aria-label="New Signups icon">
<span class="iconify ph--user-plus" aria-hidden="true"></span>
</div>
<h3 class="flex-1 flex text-fg-muted ml-3">New Signups</h3>
</div>
<div class="py-3 flex text-center justify-center font-semibold text-3xl text-fg">342</div>
<div class="flex justify-between items-center">
<p class="text-xs text-fg-muted flex-1 line-clamp-1">New signups this month</p>
<div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
role="img" aria-label="Trend indicator">
<span aria-hidden="true" class="iconify ph--trend-up"></span>
</div>
</div>
</x-ui.card>
<x-ui.card>
<div class="flex items-center">
<div class="size-8 text-white flex items-center justify-center rounded-full bg-success" role="img"
aria-label="Active Users icon">
<span class="iconify ph--users" aria-hidden="true"></span>
</div>
<h3 class="flex-1 flex text-fg-muted ml-3">Active Users</h3>
</div>
<div class="py-3 flex text-center justify-center font-semibold text-3xl text-fg">8,921</div>
<div class="flex justify-between items-center">
<p class="text-xs text-fg-muted flex-1 line-clamp-1">Currently active users</p>
<div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-success"
role="img" aria-label="Trend indicator">
<span aria-hidden="true" class="iconify ph--trend-up"></span>
</div>
</div>
</x-ui.card>
<x-ui.card>
<div class="flex items-center">
<div class="size-8 text-white flex items-center justify-center rounded-full bg-warning" role="img"
aria-label="Churn Rate icon">
<span class="iconify ph--chart-line-down" aria-hidden="true"></span>
</div>
<h3 class="flex-1 flex text-fg-muted ml-3">Churn Rate</h3>
</div>
<div class="py-3 flex text-center justify-center font-semibold text-3xl text-fg">2.3%</div>
<div class="flex justify-between items-center">
<p class="text-xs text-fg-muted flex-1 line-clamp-1">Monthly churn rate</p>
<div class="size-6 text-white text-sm rounded-full flex items-center justify-center bg-danger"
role="img" aria-label="Trend indicator">
<span aria-hidden="true" class="iconify ph--trend-down"></span>
</div>
</div>
</x-ui.card>
</div>
</div>
Dash KPI
KPI cards
<div class="max-w-7xl px-4 mx-auto">
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
<x-ui.card class="flex flex-col">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-fg-muted">Monthly Recurring Revenue</span>
<span class="iconify ph--currency-circle-dollar size-5 text-primary"></span>
</div>
<span class="text-3xl font-semibold text-fg mt-3">$48.5K</span>
<span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
<span aria-hidden="true" class="iconify size-4 ph--trend-up"></span>
+12.5% MoM
</span>
</x-ui.card>
<x-ui.card class="flex flex-col">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-fg-muted">Active Subscriptions</span>
<span class="iconify ph--users-three size-5 text-primary"></span>
</div>
<span class="text-3xl font-semibold text-fg mt-3">1,247</span>
<span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
<span aria-hidden="true" class="iconify size-4 ph--trend-up"></span>
+28 this month
</span>
</x-ui.card>
<x-ui.card class="flex flex-col">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-fg-muted">Churn Rate</span>
<span class="iconify ph--chart-line-down size-5 text-danger"></span>
</div>
<span class="text-3xl font-semibold text-fg mt-3">2.3%</span>
<span class="w-max ui-soft ui-soft-danger mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
<span aria-hidden="true" class="iconify size-4 ph--trend-down"></span>
Critical threshold: 3%
</span>
</x-ui.card>
<x-ui.card class="flex flex-col">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-fg-muted">Customer Lifetime Value</span>
<span class="iconify ph--target size-5 text-primary"></span>
</div>
<span class="text-3xl font-semibold text-fg mt-3">$2,847</span>
<span class="w-max ui-soft ui-soft-success mt-4 inline-flex items-center gap-x-1.5 rounded-md px-2 py-1.5 text-xs font-medium">
<span aria-hidden="true" class="iconify size-4 ph--trend-up"></span>
+18% YoY
</span>
</x-ui.card>
</div>
</div>
<div class="max-w-7xl px-4 mx-auto">
<div class="grid gap-3 md:grid-cols-2 lg:grid-cols-4">
<x-ui.card>
<div class="space-y-2">
<p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
Conversion Rate
</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-fg">3.2%</span>
<div class="flex items-center space-x-1 text-xs font-medium text-green-600">
<span class="text-xs iconify ph--trend-up"></span>
<span>+0.5%</span>
</div>
</div>
</div>
</x-ui.card>
<x-ui.card >
<div class="space-y-2">
<p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
Bounce Rate
</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-fg">42.3%</span>
<div class="flex items-center space-x-1 text-xs font-medium text-danger">
<span class="text-xs iconify ph--trend-up"></span>
<span>-1.2%</span>
</div>
</div>
</div>
</x-ui.card>
<x-ui.card>
<div class="space-y-2">
<p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
Session Duration
</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-fg">4m 32s</span>
<div class="flex items-center space-x-1 text-xs font-medium text-success">
<span class="text-xs iconify ph--trend-up"></span>
<span>+12%</span>
</div>
</div>
</div>
</x-ui.card>
<x-ui.card>
<div class="space-y-2">
<p class="text-xs font-medium text-fg-muted uppercase tracking-wide">
New Visitors
</p>
<div class="flex items-center justify-between">
<span class="text-xl font-semibold text-fg">1,429 </span>
<div class="flex items-center space-x-1 text-xs font-medium text-success">
<span class="text-xs iconify ph--trend-up"></span>
<span>+23%</span>
</div>
</div>
</div>
</x-ui.card>
</div>
</div>