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-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-ring> for the completion percentage.

 <div data-layout="center" data-layout-max="wide" data-layout-gap="xl"> <!-- Page Header --> <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> <!-- Stats Grid --> <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-ring data-size="s" data-variant="success" style="--progress: 89;"> <span class="visually-hidden">89%</span> </progress-ring> </div> </layout-card> <!-- Additional stat cards... --> </div> </div>

Stat Card Styles

layout-card dl, layout-card dd { margin: 0; } .stat-value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-bold); } .stat-change { display: inline-flex; align-items: center; gap: var(--size-2xs); font-size: var(--font-size-sm); } .stat-change.positive { color: var(--color-success); } .stat-change.negative { color: var(--color-danger); } .stat-icon { padding: var(--size-s); background: var(--color-surface-alt); border-radius: var(--radius-m); display: flex; align-items: center; justify-content: center; }

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> <!-- Additional stat cards... --> </div> <div data-layout="grid" data-layout-gap="l" data-layout-min="400px"> <!-- Main Chart --> <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"> <!-- Your chart library renders here --> </div> </div> </layout-card> <!-- Secondary Chart --> <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"> <!-- Your chart library renders here --> </div> </div> </layout-card> </div>

Chart Placeholder Styles

.chart-placeholder { display: flex; align-items: center; justify-content: center; border: 2px dashed var(--color-border); border-radius: var(--radius-m); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); } .chart-main { aspect-ratio: 16 / 9; min-height: 300px; } .chart-secondary { aspect-ratio: 4 / 3; min-height: 200px; }

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

.data-table-wrapper { overflow-x: auto; }

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-ring data-size xs s m l xl Ring size
progress-ring data-variant success warning error info Ring color
progress-ring --progress 0–100 (CSS custom property) 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-danger 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

Related

App Shells

Application shell layouts with navigation

Stats

Stat card patterns and change indicators

Card

Card component with padding and variant options

Badge

Status badges with semantic colors

User Avatar

Avatar component with fallback initials

Icon

SVG icon component with size variants

Progress Ring

Circular progress indicator