Tailwind CSS Academy · Lesson

Stat Cards and KPI Widgets

Create a row of stat cards displaying key metrics with colored icons, trend indicators, and comparison percentages using grid and flex utilities.

KPI Cards Purpose and Placement

KPI (Key Performance Indicator) cards, also called stat cards or metric widgets, display high-level numbers at the top of a dashboard. They give users an instant snapshot of the most important metrics — revenue, active users, conversion rate — without needing to scroll or drill into tables. They are always the first thing users see on a dashboard page.

<!-- Stat cards positioned at the top of dashboard main content -->
<main class="flex-1 overflow-y-auto bg-gray-100 p-6">
  <!-- KPI cards row -->
  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 xl:grid-cols-4">
    <!-- Card 1: Total Revenue -->
    <!-- Card 2: Active Users -->
    <!-- Card 3: Conversion Rate -->
    <!-- Card 4: Open Tickets -->
  </div>
  <!-- Charts and tables below -->
</main>

Basic Stat Card Structure

Each stat card has four elements: a label (metric name), a value (the big number), a trend indicator (percentage change), and an optional icon. Place all of these inside a white rounded card: rounded-xl bg-white p-6 shadow-sm. Use flex column or flex row layouts within the card depending on whether the icon sits on the side or above the value.

<div class="rounded-xl bg-white p-6 shadow-sm">
  <div class="flex items-center justify-between">
    <!-- Label -->
    <p class="text-sm font-medium text-gray-500">Total Revenue</p>
    <!-- Icon -->
    <div class="flex h-10 w-10 items-center justify-center rounded-full bg-blue-100">
      <svg class="h-5 w-5 text-blue-600"><!-- currency icon --></svg>
    </div>
  </div>
  <!-- Value -->
  <p class="mt-4 text-3xl font-bold tracking-tight text-gray-900">$48,295</p>
  <!-- Trend -->
  <p class="mt-1 text-sm text-green-600">
    <span class="font-semibold">+12.5%</span> vs last month
  </p>
</div>

All lessons in this course

← Back to Tailwind CSS Academy