KPI Card

KPI dashboard cards with value, change indicator, progress bar, compact layout, color variants, and glass effect.

Basic KPI Card

Preview

📊 ↑ 12.5%

Revenue

$45,231

72% of target $63,000

👥 ↑ 8.2%

Users

2,847

85% of target 3,350

⏱️ ↓ 3.1%

Avg. Time

4m 32s

45% of target < 3m

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 700px;">
  <div class="kpi-card">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">📊</span>
      <span class="kpi-card-change kpi-card-change-up">↑ 12.5%</span>
    </div>
    <div class="kpi-card-label">Revenue</div>
    <div class="kpi-card-value">$45,231</div>
    <div class="kpi-card-progress">
      <div class="kpi-card-progress-bar" style="width: 72%;"></div>
    </div>
    <div class="kpi-card-target">
      <span>72% of target</span>
      <span>$63,000</span>
    </div>
  </div>

  <div class="kpi-card color-success">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">👥</span>
      <span class="kpi-card-change kpi-card-change-up">↑ 8.2%</span>
    </div>
    <div class="kpi-card-label">Users</div>
    <div class="kpi-card-value">2,847</div>
    <div class="kpi-card-progress">
      <div class="kpi-card-progress-bar" style="width: 85%;"></div>
    </div>
    <div class="kpi-card-target">
      <span>85% of target</span>
      <span>3,350</span>
    </div>
  </div>

  <div class="kpi-card color-warning">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">⏱️</span>
      <span class="kpi-card-change kpi-card-change-down">↓ 3.1%</span>
    </div>
    <div class="kpi-card-label">Avg. Time</div>
    <div class="kpi-card-value">4m 32s</div>
    <div class="kpi-card-progress">
      <div class="kpi-card-progress-bar" style="width: 45%;"></div>
    </div>
    <div class="kpi-card-target">
      <span>45% of target</span>
      <span>< 3m</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-4 max-w-[700px]">
  <div class="flex flex-col p-4 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-between mb-2">
      <span class="text-2xl">📊</span>
      <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-success/10 text-success">↑ 12.5%</span>
    </div>
    <div class="text-xs text-base-content/50 mb-1">Revenue</div>
    <div class="text-xl font-bold mb-2">$45,231</div>
    <div class="w-full h-1 bg-base-content/8 rounded-full overflow-hidden">
      <div class="h-full bg-primary rounded-full" style="width: 72%;"></div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for styling
// Update progress bar width dynamically:
// progressBar.style.width = percentage + '%';

Compact Layout

Preview

💰

Total Sales

$12,450

↑ 5.4%

🔄

Returns

→ 0%

<div style="display: flex; flex-direction: column; gap: 0.75rem; max-width: 400px;">
  <div class="kpi-card kpi-card-compact color-primary">
    <div class="kpi-card-icon-wrapper">
      <span class="kpi-card-icon">💰</span>
    </div>
    <div class="kpi-card-content">
      <div class="kpi-card-label">Total Sales</div>
      <div class="kpi-card-value">$12,450</div>
    </div>
    <span class="kpi-card-change kpi-card-change-up">↑ 5.4%</span>
  </div>

  <div class="kpi-card kpi-card-compact color-error">
    <div class="kpi-card-icon-wrapper">
      <span class="kpi-card-icon">🔄</span>
    </div>
    <div class="kpi-card-content">
      <div class="kpi-card-label">Returns</div>
      <div class="kpi-card-value">23</div>
    </div>
    <span class="kpi-card-change kpi-card-change-neutral">→ 0%</span>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-3 max-w-sm">
  <div class="flex flex-row items-center gap-4 p-4 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-center shrink-0 size-12 bg-primary/10 rounded-field">
      <span class="text-2xl">💰</span>
    </div>
    <div class="flex-1 min-w-0">
      <div class="text-xs text-base-content/50 mb-1">Total Sales</div>
      <div class="text-xl font-bold">$12,450</div>
    </div>
    <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-success/10 text-success">↑ 5.4%</span>
  </div>

  <div class="flex flex-row items-center gap-4 p-4 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-center shrink-0 size-12 bg-error/10 rounded-field">
      <span class="text-2xl">🔄</span>
    </div>
    <div class="flex-1 min-w-0">
      <div class="text-xs text-base-content/50 mb-1">Returns</div>
      <div class="text-xl font-bold">23</div>
    </div>
    <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-base-content/10 text-base-content/60">→ 0%</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Sizes

Preview

📈 ↑ 2%

Small

1,234

📈 ↑ 5%

Default

5,678

📈 ↑ 10%

Large

9,012

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 700px;">
  <div class="kpi-card kpi-card-sm">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">📈</span>
      <span class="kpi-card-change kpi-card-change-up">↑ 2%</span>
    </div>
    <div class="kpi-card-label">Small</div>
    <div class="kpi-card-value">1,234</div>
  </div>

  <div class="kpi-card">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">📈</span>
      <span class="kpi-card-change kpi-card-change-up">↑ 5%</span>
    </div>
    <div class="kpi-card-label">Default</div>
    <div class="kpi-card-value">5,678</div>
  </div>

  <div class="kpi-card kpi-card-lg">
    <div class="kpi-card-header">
      <span class="kpi-card-icon">📈</span>
      <span class="kpi-card-change kpi-card-change-up">↑ 10%</span>
    </div>
    <div class="kpi-card-label">Large</div>
    <div class="kpi-card-value">9,012</div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-4 max-w-175">
  <!-- Small -->
  <div class="flex flex-col p-2 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-between mb-2">
      <span class="text-xl">📈</span>
      <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-success/10 text-success">↑ 2%</span>
    </div>
    <div class="text-xs text-base-content/50 mb-1">Small</div>
    <div class="text-base font-bold">1,234</div>
  </div>

  <!-- Default -->
  <div class="flex flex-col p-4 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-between mb-2">
      <span class="text-2xl">📈</span>
      <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-success/10 text-success">↑ 5%</span>
    </div>
    <div class="text-xs text-base-content/50 mb-1">Default</div>
    <div class="text-xl font-bold">5,678</div>
  </div>

  <!-- Large -->
  <div class="flex flex-col p-6 bg-base-100 rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
    <div class="flex items-center justify-between mb-2">
      <span class="text-3xl">📈</span>
      <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-success/10 text-success">↑ 10%</span>
    </div>
    <div class="text-xs text-base-content/50 mb-1">Large</div>
    <div class="text-2xl font-bold">9,012</div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Glass Variant

Preview

💎 ↑ 18%

Premium

$8,420

🎯 ↑ 7%

Conversion

3.2%

⭐ ↑ 0.3

Rating

4.8

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;">
    <div class="kpi-card glass" style="color: white;">
      <div class="kpi-card-header">
        <span class="kpi-card-icon" style="color: white;">💎</span>
        <span class="kpi-card-change" style="background: rgba(255,255,255,0.15); color: white;">↑ 18%</span>
      </div>
      <div class="kpi-card-label" style="color: rgba(255,255,255,0.7);">Premium</div>
      <div class="kpi-card-value" style="color: white;">$8,420</div>
    </div>
    <div class="kpi-card glass" style="color: white;">
      <div class="kpi-card-header">
        <span class="kpi-card-icon" style="color: white;">🎯</span>
        <span class="kpi-card-change" style="background: rgba(255,255,255,0.15); color: white;">↑ 7%</span>
      </div>
      <div class="kpi-card-label" style="color: rgba(255,255,255,0.7);">Conversion</div>
      <div class="kpi-card-value" style="color: white;">3.2%</div>
    </div>
    <div class="kpi-card glass" style="color: white;">
      <div class="kpi-card-header">
        <span class="kpi-card-icon" style="color: white;">⭐</span>
        <span class="kpi-card-change" style="background: rgba(255,255,255,0.15); color: white;">↑ 0.3</span>
      </div>
      <div class="kpi-card-label" style="color: rgba(255,255,255,0.7);">Rating</div>
      <div class="kpi-card-value" style="color: white;">4.8</div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="p-6 rounded-box" style="background: linear-gradient(135deg, var(--color-primary), var(--color-info));">
  <div class="grid grid-cols-3 gap-4">
    <div class="flex flex-col p-4 glass text-white rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
      <div class="flex items-center justify-between mb-2">
        <span class="text-2xl">💎</span>
        <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-white/15 text-white">↑ 18%</span>
      </div>
      <div class="text-xs text-white/70 mb-1">Premium</div>
      <div class="text-xl font-bold text-white">$8,420</div>
    </div>
    <div class="flex flex-col p-4 glass text-white rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
      <div class="flex items-center justify-between mb-2">
        <span class="text-2xl">🎯</span>
        <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-white/15 text-white">↑ 7%</span>
      </div>
      <div class="text-xs text-white/70 mb-1">Conversion</div>
      <div class="text-xl font-bold text-white">3.2%</div>
    </div>
    <div class="flex flex-col p-4 glass text-white rounded-box cursor-pointer hover:-translate-y-0.5 hover:shadow-lg transition">
      <div class="flex items-center justify-between mb-2">
        <span class="text-2xl">⭐</span>
        <span class="inline-flex items-center gap-1 text-xs font-semibold rounded-full px-2 py-0.5 bg-white/15 text-white">↑ 0.3</span>
      </div>
      <div class="text-xs text-white/70 mb-1">Rating</div>
      <div class="text-xl font-bold text-white">4.8</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required