Stats

KPI and statistics cards with values, trends, icons, and progress bars.

Basic Stats

Total Revenue

$45,231

New Users

2,345

Bounce Rate

24.3%

<div class="stats-grid stats-grid-3">
  <div class="stat">
    <div class="stat-label">Total Revenue</div>
    <div class="stat-value">$45,231</div>
    <div class="stat-footer">
      <span class="stat-trend stat-trend-up">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
        12.5%
      </span>
      <span class="stat-desc">vs last month</span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">New Users</div>
    <div class="stat-value">2,345</div>
    <div class="stat-footer">
      <span class="stat-trend stat-trend-up">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
        8.2%
      </span>
      <span class="stat-desc">vs last month</span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">Bounce Rate</div>
    <div class="stat-value">24.3%</div>
    <div class="stat-footer">
      <span class="stat-trend stat-trend-down">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m6 9 6 6 6-6"/></svg>
        3.1%
      </span>
      <span class="stat-desc">vs last month</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-col gap-2 p-6 bg-base-100 border border-base-200 rounded-box">
    <div class="text-sm font-medium text-base-content/60">Total Revenue</div>
    <div class="text-3xl font-bold tabular-nums">$45,231</div>
    <div class="flex items-center gap-2 mt-1">
      <span class="inline-flex items-center gap-1 text-sm font-semibold text-success bg-success/10 px-2 py-0.5 rounded-full">+12.5%</span>
      <span class="text-xs text-base-content/50">vs last month</span>
    </div>
  </div>
  <!-- ... more stat cards -->
</div>

Requires: tw.min.css

// No JavaScript required — pure CSS stat cards

With Icons

Active Users

1,234

Orders

856

<div class="stats-grid stats-grid-2">
  <div class="stat">
    <div class="stat-header">
      <div class="stat-label">Active Users</div>
      <div class="stat-icon color-primary">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
    </div>
    <div class="stat-value">1,234</div>
    <div class="stat-footer">
      <span class="stat-trend stat-trend-up">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-3.5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m18 15-6-6-6 6"/></svg>
        5.3%
      </span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-header">
      <div class="stat-label">Orders</div>
      <div class="stat-icon color-success">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15h0M2 9.5h20"/></svg>
      </div>
    </div>
    <div class="stat-value">856</div>
    <div class="stat-footer">
      <span class="stat-trend stat-trend-neutral">0.0%</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-2 gap-4">
  <div class="flex flex-col gap-2 p-6 bg-base-100 border border-base-200 rounded-box">
    <div class="flex items-center justify-between">
      <div class="text-sm font-medium text-base-content/60">Active Users</div>
      <div class="flex items-center justify-center size-12 rounded-box bg-primary/10 text-primary">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
      </div>
    </div>
    <div class="text-3xl font-bold tabular-nums">1,234</div>
    <span class="inline-flex items-center gap-1 text-sm font-semibold text-success">+5.3%</span>
  </div>
  <div class="flex flex-col gap-2 p-6 bg-base-100 border border-base-200 rounded-box">
    <div class="flex items-center justify-between">
      <div class="text-sm font-medium text-base-content/60">Orders</div>
      <div class="flex items-center justify-center size-12 rounded-box bg-success/10 text-success">
        <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="M7 15h0M2 9.5h20"/></svg>
      </div>
    </div>
    <div class="text-3xl font-bold tabular-nums">856</div>
    <span class="inline-flex items-center gap-1 text-sm font-medium text-base-content/40">0.0%</span>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

With Progress

Storage Used

15 GB used 20 GB total

<div class="stat">
  <div class="stat-label">Storage Used</div>
  <div class="stat-value-wrapper">
    <div class="stat-value">75</div>
    <div class="stat-value-suffix">%</div>
  </div>
  <div class="stat-progress">
    <div class="stat-progress-bar">
      <div class="stat-progress-fill stat-progress-fill-warning" style="width: 75%"></div>
    </div>
    <div class="stat-progress-label">
      <span>15 GB used</span>
      <span>20 GB total</span>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-2 p-6 bg-base-100 border border-base-200 rounded-box">
  <div class="text-sm font-medium text-base-content/60">Storage Used</div>
  <div class="flex items-baseline gap-1">
    <span class="text-3xl font-bold">75</span>
    <span class="text-lg font-medium text-base-content/60">%</span>
  </div>
  <div class="mt-2">
    <div class="h-1.5 bg-base-200 rounded-full overflow-hidden">
      <div class="h-full bg-warning rounded-full" style="width: 75%"></div>
    </div>
    <div class="flex justify-between text-xs text-base-content/50 mt-1">
      <span>15 GB used</span>
      <span>20 GB total</span>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required — set progress width via inline style

Sizes & Layout

Sessions

4,521

Score

out of 100

Likes

3.2k

<!-- Small stat -->
<div class="stat stat-sm">
  <div class="stat-label">Sessions</div>
  <div class="stat-value">4,521</div>
</div>

<!-- Centered stat -->
<div class="stat stat-centered">
  <div class="stat-label">Score</div>
  <div class="stat-value stat-value-xl">98</div>
  <div class="stat-desc">out of 100</div>
</div>

<!-- Horizontal stat -->
<div class="stat stat-horizontal">
  <div class="stat-icon color-error">
    <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19.5 12.572 12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572"/></svg>
  </div>
  <div>
    <div class="stat-label">Likes</div>
    <div class="stat-value">3.2k</div>
  </div>
</div>

Requires: ux.min.css

<div class="flex flex-col gap-4">
  <!-- Small stat -->
  <div class="flex flex-col gap-1 p-4 bg-base-100 border border-base-200 rounded-box">
    <div class="text-xs font-medium text-base-content/60">Sessions</div>
    <div class="text-xl font-bold tabular-nums">4,521</div>
  </div>
  <!-- Centered stat -->
  <div class="flex flex-col items-center gap-1 p-6 bg-base-100 border border-base-200 rounded-box text-center">
    <div class="text-sm font-medium text-base-content/60">Score</div>
    <div class="text-5xl font-bold tabular-nums">98</div>
    <div class="text-xs text-base-content/50">out of 100</div>
  </div>
  <!-- Horizontal stat -->
  <div class="flex items-center gap-4 p-6 bg-base-100 border border-base-200 rounded-box">
    <div class="flex items-center justify-center size-12 rounded-box bg-error/10 text-error">
      <svg xmlns="http://www.w3.org/2000/svg" class="size-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M19.5 12.572 12 20l-7.5-7.428A5 5 0 1 1 12 6.006a5 5 0 1 1 7.5 6.572"/></svg>
    </div>
    <div>
      <div class="text-sm font-medium text-base-content/60">Likes</div>
      <div class="text-3xl font-bold tabular-nums">3.2k</div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required

Classes Reference

Class	Description
.stat	Base stats card
.stat-header	Label + icon row
.stat-label	Label text
.stat-icon	Icon container (48px)
.stat-value	Main value (2rem)
.stat-value-sm / -lg / -xl	Value sizes
.stat-value-wrapper	Value with prefix/suffix
.stat-value-prefix / -suffix	Prefix/suffix text
.stat-footer	Footer row (trend + desc)
.stat-trend	Trend badge
.stat-trend-up	Positive trend (green)
.stat-trend-down	Negative trend (red)
.stat-trend-neutral	Neutral trend (gray)
.stat-desc	Description text
.stat-progress	Progress section
.stat-sm / .stat-lg	Size variants
.stat-horizontal	Horizontal layout
.stat-centered	Centered layout
.stats-grid	Grid container
.stats-grid-2 / -3 / -4 / -auto	Grid columns
.stat.glass	Glass variant