Stat cards — Build an Admin Dashboard

Tutorials · Build an Admin DashboardNakshora 3.1Updated 2026-09-152 tags

KPI row with deltas. Chapter 2 of 4 in the Nakshora 3.1 "Build an Admin Dashboard" tutorial series.

Stat cards — Build an Admin Dashboard — Nakshora Docs — Tutorials · Build an Admin Dashboard · Nakshora Docs editorial library

*Build an Admin Dashboard — chapter 2 of 4.* KPI row with deltas.

What you will build#

Four KPI cards.

Step by step#

example

html

<div class="grid sm:grid-cols-2 xl:grid-cols-4 gap-4">
  <div class="p-5 rounded-xl border bg-white">
    <p class="text-sm text-slate-500">Revenue</p>
    <p class="mt-1 text-2xl font-bold tabular-nums">$48.2K</p>
    <p class="text-xs text-emerald-600">▲ 12.4%</p>
  </div>
</div>

Why it works#

tabular-nums keeps numbers aligned — a pro detail.

Try it yourself#

Add sparkline placeholder
Color the deltas
Add icons

tutorials/index|All tutorials · tutorials/dashboard/shell|← The app shell · tutorials/dashboard/data-table|The data table →

#tutorials #dashboard