dashboard stats metrics kpi cards analytics dashboard stats metrics kpi analytics cards revenue dashboard stat cards KPI metric row
Dashboard Stats
Fetch pattern JSON:
curl https://webspire.de/patterns/dashboard/stats.json stats.html
<section class="ws-dashboard bg-[var(--ws-dashboard-bg)] py-8">
<div class="mx-auto max-w-7xl px-6">
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">Total Revenue</p>
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-100 text-emerald-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v12m-3-2.818l.879.659c1.171.879 3.07.879 4.242 0 1.172-.879 1.172-2.303 0-3.182C13.536 12.219 12.768 12 12 12c-.725 0-1.45-.22-2.003-.659-1.106-.879-1.106-2.303 0-3.182s2.9-.879 4.006 0l.415.33M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-[var(--ws-dashboard-text)]">$45,231</p>
<div class="mt-2 flex items-center gap-1.5">
<span class="inline-flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/></svg>
20.1%
</span>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">vs last month</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">New Customers</p>
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-indigo-100 text-indigo-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z"/></svg>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-[var(--ws-dashboard-text)]">+2,350</p>
<div class="mt-2 flex items-center gap-1.5">
<span class="inline-flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/></svg>
12.5%
</span>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">vs last month</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">Active Users</p>
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-sky-100 text-sky-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 006 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0118 16.5h-2.25m-7.5 0h7.5m-7.5 0l-1 3m8.5-3l1 3m0 0l.5 1.5m-.5-1.5h-9.5m0 0l-.5 1.5m.75-9l3-3 2.148 2.148A12.061 12.061 0 0116.5 7.605"/></svg>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-[var(--ws-dashboard-text)]">12,234</p>
<div class="mt-2 flex items-center gap-1.5">
<span class="inline-flex items-center gap-0.5 rounded-full bg-emerald-100 px-1.5 py-0.5 text-xs font-medium text-emerald-700">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 19.5l15-15m0 0H8.25m11.25 0v11.25"/></svg>
5.4%
</span>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">vs last week</span>
</div>
</div>
<div class="rounded-xl border border-[var(--ws-dashboard-border)] bg-[var(--ws-dashboard-card-bg)] p-5">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-[var(--ws-dashboard-text-muted)]">Bounce Rate</p>
<div class="flex h-8 w-8 items-center justify-center rounded-lg bg-rose-100 text-rose-600">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3"/></svg>
</div>
</div>
<p class="mt-3 text-2xl font-bold text-[var(--ws-dashboard-text)]">24.5%</p>
<div class="mt-2 flex items-center gap-1.5">
<span class="inline-flex items-center gap-0.5 rounded-full bg-rose-100 px-1.5 py-0.5 text-xs font-medium text-rose-700">
<svg class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 4.5l15 15m0 0V8.25m0 11.25H8.25"/></svg>
2.1%
</span>
<span class="text-xs text-[var(--ws-dashboard-text-muted)]">vs last month</span>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
dashboardstatsmetricskpicardsanalytics
Slots
| Name | Required | Description |
|---|---|---|
| cards | Yes | Stat cards with label, value, trend badge, and icon. |
Four-column stat card row for dashboards. Each card shows a label, large metric value, trend badge (up/down with percentage), and a colored icon. Responsive: 4 → 2 → 1 columns.