Dashboard

Dashboard layouts with stat cards, charts, and data tables. Build comprehensive admin interfaces and analytics views.

Overview

Dashboard patterns combine multiple components to create data-rich interfaces. These layouts organize statistics, visualizations, and tabular data in a way that's easy to scan and understand.

Key features:

Stat cards using <dl>/<dt>/<dd> for semantic label/value pairs
<progress data-type="ring"> for percentage metrics in stat cards
Chart placeholder layouts for any visualization library
Native <table> styling with <layout-badge> for status and <user-avatar> for identity
Responsive grid layouts using data-layout-min for automatic column sizing
Consistent spacing and <layout-card>-based organization

Stats Grid Dashboard

A dashboard focused on key metrics displayed in stat cards. Uses <dl>/<dt>/<dd> for semantic markup and <progress data-type="ring"> for the completion percentage.

<div data-layout="center" data-layout-max="wide" data-layout-gap="xl">
  
  <header data-layout="cluster" data-layout-justify="between" data-layout-align="center">
    <div data-layout="stack" data-layout-gap="xs">
      <h1>Dashboard</h1>
      <p class="text-muted">Overview of your business metrics</p>
    </div>
    <div data-layout="cluster" data-layout-gap="s">
      <button class="button secondary">
        <icon-wc name="calendar" size="sm"></icon-wc>
        Last 30 days
      </button>
      <button class="button">
        <icon-wc name="download" size="sm"></icon-wc>
        Export
      </button>
    </div>
  </header>

<div data-layout="grid" data-layout-gap="l" data-layout-min="200px">
    <layout-card>
      <div data-layout="cluster" data-layout-justify="between" data-layout-align="start">
        <dl data-layout="stack" data-layout-gap="xs">
          <dt class="text-sm text-muted">Total Revenue</dt>
          <dd class="stat-value">$45,231</dd>
          <dd class="stat-change positive">
            <icon-wc name="trending-up" size="sm"></icon-wc>
            +12% from last month
          </dd>
        </dl>
        <span class="stat-icon">
          <icon-wc name="dollar-sign" size="md"></icon-wc>
        </span>
      </div>
    </layout-card>

<layout-card>
      <div data-layout="cluster" data-layout-justify="between" data-layout-align="start">
        <dl data-layout="stack" data-layout-gap="xs">
          <dt class="text-sm text-muted">Tasks Completed</dt>
          <dd class="stat-value">89%</dd>
          <dd class="stat-change negative">
            <icon-wc name="trending-down" size="sm"></icon-wc>
            -4% from last month
          </dd>
        </dl>
        <progress data-type="ring" data-size="s" class="success" value="89" max="100">89%</progress>
      </div>
    </layout-card>
    
  </div>
</div>

Stat Card Styles

Charts Dashboard

A dashboard layout with chart placeholders for analytics and data visualization. Uses a responsive grid for chart positioning with compact stat cards at the top.

<div data-layout="grid" data-layout-gap="l" data-layout-min="250px">
  <layout-card>
    <dl data-layout="stack" data-layout-gap="s">
      <dt class="text-sm text-muted">Total Visitors</dt>
      <dd data-layout="cluster" data-layout-justify="between" data-layout-align="end">
        <span class="stat-value">24,521</span>
        <span class="stat-change positive">
          <icon-wc name="trending-up" size="sm"></icon-wc>
          +12.5%
        </span>
      </dd>
    </dl>
  </layout-card>
  
</div>

<div data-layout="grid" data-layout-gap="l" data-layout-min="400px">
  
  <layout-card data-padding="l">
    <div data-layout="stack" data-layout-gap="m">
      <div data-layout="cluster" data-layout-justify="between" data-layout-align="center">
        <h2 class="text-lg">Traffic Overview</h2>
        <div data-layout="cluster" data-layout-gap="s">
          <button class="button small ghost">Daily</button>
          <button class="button small secondary">Weekly</button>
          <button class="button small ghost">Monthly</button>
        </div>
      </div>
      <div class="chart-placeholder chart-main">
        
      </div>
    </div>
  </layout-card>

<layout-card data-padding="l">
    <div data-layout="stack" data-layout-gap="m">
      <h2 class="text-lg">Traffic Sources</h2>
      <div class="chart-placeholder chart-secondary">
        
      </div>
    </div>
  </layout-card>
</div>

Chart Placeholder Styles

Data Table Dashboard

A dashboard centered on tabular data with a filter bar, status badges via <layout-badge>, user avatars via <user-avatar>, and row actions. Uses native <table> styling from Vanilla Breeze.

<layout-card data-padding="none">
  <div class="data-table-wrapper">
    <table>
      <thead>
        <tr>
          <th scope="col">Customer</th>
          <th scope="col">Email</th>
          <th scope="col">Status</th>
          <th scope="col">Amount</th>
          <th scope="col">Date</th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div data-layout="cluster" data-layout-gap="s" data-layout-align="center">
              <user-avatar data-size="sm">
                <div data-fallback>JD</div>
              </user-avatar>
              <span>John Doe</span>
            </div>
          </td>
          <td>john.doe@example.com</td>
          <td>
            <layout-badge data-color="success" data-variant="subtle" data-size="lg">Completed</layout-badge>
          </td>
          <td>$250.00</td>
          <td>Jan 15, 2026</td>
          <td>
            <div data-layout="cluster" data-layout-gap="xs">
              <button class="button ghost small icon-only" aria-label="View">
                <icon-wc name="eye" size="sm"></icon-wc>
              </button>
              <button class="button ghost small icon-only" aria-label="Edit">
                <icon-wc name="edit" size="sm"></icon-wc>
              </button>
              <button class="button ghost small icon-only" aria-label="More">
                <icon-wc name="more-vertical" size="sm"></icon-wc>
              </button>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</layout-card>

Table Wrapper

Configuration

Dashboard patterns use these layout attributes and components:

Element	Attribute	Values	Description
`data-layout="grid"`	`data-layout-min`	CSS length (e.g. `200px`)	Minimum column width before wrapping
`data-layout="grid"`	`data-layout-gap`	`xs` `s` `m` `l` `xl`	Gap between grid items
`data-layout="cluster"`	`data-layout-justify`	`start` `center` `end` `between`	Horizontal distribution
`data-layout="cluster"`	`data-layout-align`	`start` `center` `end`	Vertical alignment
`data-layout="cluster"`	`data-layout-gap`	`xs` `s` `m` `l` `xl`	Gap between items
`data-layout="stack"`	`data-layout-gap`	`xs` `s` `m` `l` `xl` `2xl`	Vertical spacing
`layout-card`	`data-padding`	`none` `s` `m` `l` `xl`	Card padding
`layout-card`	`data-variant`	`elevated` `outlined` `ghost`	Card style
`layout-badge`	`data-color`	`success` `warning` `error` `info` `primary`	Badge color
`layout-badge`	`data-variant`	`subtle` `outlined`	Badge style
`layout-badge`	`data-size`	`sm` `lg`	Badge size
`user-avatar`	`data-size`	`xs` `sm` `md` `lg` `xl`	Avatar size
`progress[data-type="ring"]`	`data-size`	`xs` `s` `m` `l` `xl`	Ring size
`progress[data-type="ring"]`	`value` / `max`	Native attributes	Progress value

Usage Notes

Semantic stat cards: Use <dl>/<dt>/<dd> for label/value pairs — reset default margins with layout-card dl, layout-card dd { margin: 0 }
Native tables: Vanilla Breeze styles <table> elements directly — no custom classes needed. Wrap in .data-table-wrapper for horizontal scrolling on small screens.
Loading states: Show skeleton placeholders while data loads to prevent layout shift
Responsive layout: The grid automatically adjusts columns based on data-layout-min; test on mobile to ensure usability
Chart libraries: Chart placeholders work with any library (Chart.js, D3, ApexCharts, etc.)
Semantic colors: Use --color-success for positive trends, --color-error for negative
Empty states: Provide helpful empty states when no data is available
Accessibility: Ensure tables have proper scope attributes and buttons have aria-label
Real-time updates: Consider using subtle animations when stats update dynamically

Welcome to Vanilla Breeze

Dashboard

Overview

Stats Grid Dashboard

Stat Card Styles

Charts Dashboard

Chart Placeholder Styles

Data Table Dashboard

Table Wrapper

Configuration

Usage Notes

Related

App Shells

Stats

Card

Badge

User Avatar

Icon

Progress (Ring Mode)