Dashboard Grid - UX Components

Basic Dashboard Grid

Preview

Revenue

$12,450

This Month

+12.5%

Orders

348

This Month

+8.2%

Customers

1,205

Active

-2.1%

<div class="dashboard-grid dashboard-grid-cols-3" style="padding: 0;">
  <div class="dashboard-grid-item" style="min-height: 150px;">
    <div class="dashboard-grid-item-header">
      <span class="dashboard-grid-item-title">Revenue</span>
    </div>
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <div class="dashboard-grid-stat">
        <div class="dashboard-grid-stat-value">$12,450</div>
        <div class="dashboard-grid-stat-label">This Month</div>
        <div class="dashboard-grid-stat-trend dashboard-grid-stat-trend-up">+12.5%</div>
      </div>
    </div>
  </div>
  <div class="dashboard-grid-item" style="min-height: 150px;">
    <div class="dashboard-grid-item-header">
      <span class="dashboard-grid-item-title">Orders</span>
    </div>
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <div class="dashboard-grid-stat">
        <div class="dashboard-grid-stat-value">348</div>
        <div class="dashboard-grid-stat-label">This Month</div>
        <div class="dashboard-grid-stat-trend dashboard-grid-stat-trend-up">+8.2%</div>
      </div>
    </div>
  </div>
  <div class="dashboard-grid-item" style="min-height: 150px;">
    <div class="dashboard-grid-item-header">
      <span class="dashboard-grid-item-title">Customers</span>
    </div>
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <div class="dashboard-grid-stat">
        <div class="dashboard-grid-stat-value">1,205</div>
        <div class="dashboard-grid-stat-label">Active</div>
        <div class="dashboard-grid-stat-trend dashboard-grid-stat-trend-down">-2.1%</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<div class="grid grid-cols-3 gap-4">
  <div class="flex flex-col bg-base-100 rounded-box shadow-sm min-h-[150px]">
    <div class="flex items-center justify-between p-4 border-b border-base-300">
      <span class="font-semibold">Revenue</span>
    </div>
    <div class="flex-1 flex items-center justify-center p-4">
      <div class="text-center">
        <div class="text-4xl font-bold">$12,450</div>
        <div class="text-sm uppercase text-base-content/60">This Month</div>
      </div>
    </div>
  </div>
</div>

Requires: tw.min.css

// No JavaScript required for layout — use JS for data fetching and updates

Spanning Items

Preview

Span 2 columns

1 col

Full width

<div class="dashboard-grid dashboard-grid-cols-4" style="padding: 0;">
  <div class="dashboard-grid-item dashboard-grid-item-md" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">Span 2 columns</p>
    </div>
  </div>
  <div class="dashboard-grid-item" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">1 col</p>
    </div>
  </div>
  <div class="dashboard-grid-item" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">1 col</p>
    </div>
  </div>
  <div class="dashboard-grid-item dashboard-grid-item-full" style="min-height: 100px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">Full width</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- Span classes: dashboard-grid-item-sm (1), dashboard-grid-item-md (2), dashboard-grid-item-lg (3), dashboard-grid-item-full (all) -->
<!-- Tall: dashboard-grid-item-tall spans 2 rows -->

Requires: tw.min.css

// No JavaScript required

Style Variants

Preview

Default (shadow)

Outline

Elevated (hover lift)

<div class="dashboard-grid dashboard-grid-cols-3" style="padding: 0;">
  <div class="dashboard-grid-item" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">Default (shadow)</p>
    </div>
  </div>
  <div class="dashboard-grid-item dashboard-grid-item-outline" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">Outline</p>
    </div>
  </div>
  <div class="dashboard-grid-item dashboard-grid-item-elevated" style="min-height: 120px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <p class="font-medium">Elevated (hover lift)</p>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- dashboard-grid-item-outline: border only, no shadow -->
<!-- dashboard-grid-item-elevated: larger shadow, lifts on hover -->

Requires: tw.min.css

// No JavaScript required

With Header, Content & Footer

Preview

Sales Overview

Last 30 days

Chart or content goes here

Updated 5 min ago View details

99.9%

Uptime

<div class="dashboard-grid dashboard-grid-cols-2" style="padding: 0;">
  <div class="dashboard-grid-item" style="min-height: 200px;">
    <div class="dashboard-grid-item-header">
      <div>
        <div class="dashboard-grid-item-title">Sales Overview</div>
        <div class="dashboard-grid-item-subtitle">Last 30 days</div>
      </div>
      <div class="dashboard-grid-item-actions">
        <button class="icon-btn icon-btn-sm" aria-label="Refresh">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="w-4 h-4"><polyline points="23 4 23 10 17 10"/><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"/></svg>
        </button>
      </div>
    </div>
    <div class="dashboard-grid-item-content">
      <p class="text-base-content/60">Chart or content goes here</p>
    </div>
    <div class="dashboard-grid-item-footer">
      <span>Updated 5 min ago</span>
      <a href="#" class="text-primary text-sm">View details</a>
    </div>
  </div>
  <div class="dashboard-grid-item" style="min-height: 200px;">
    <div class="dashboard-grid-item-content dashboard-grid-item-content-centered">
      <div class="dashboard-grid-stat">
        <div class="dashboard-grid-stat-value" style="color: var(--color-primary);">99.9%</div>
        <div class="dashboard-grid-stat-label">Uptime</div>
      </div>
    </div>
  </div>
</div>

Requires: ux.min.css

<!-- dashboard-grid-item-header: top section with title + actions -->
<!-- dashboard-grid-item-content: flexible middle area -->
<!-- dashboard-grid-item-footer: bottom section with metadata -->

Requires: tw.min.css

// No JavaScript required for layout