| name | dashboard-design |
| description | Data dashboard and admin panel design patterns for information-dense interfaces. Trigger: user asks to "build a dashboard", "create an admin panel", "design analytics", "make a data view", "build a settings page", "create a table view", "design a CRM", "build an internal tool", or any data-heavy interface work.
|
| license | MIT |
Dashboard Design
Pre-Flight: Check Design Context
Before generating dashboard code:
- Use
get_design_context to check for existing design tokens, component libraries, or dashboard frameworks.
- If a Figma URL is provided, pull screenshots and metadata to match the design.
- Determine: What data is being shown? Who is the user? What actions do they need to take?
1. Layout Patterns
Pattern A: Sidebar + Main Content (Most Common)
<div class="flex h-screen bg-gray-50">
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col">
<div class="h-16 flex items-center px-6 border-b border-gray-100">
<img src="/logo.svg" alt="App" class="h-8" />
</div>
<nav class="flex-1 py-4 px-3 space-y-1 overflow-y-auto">
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
bg-indigo-50 text-indigo-700 font-medium text-sm">
<svg class="w-5 h-5"></svg>
Dashboard
</a>
<a href="#" class="flex items-center gap-3 px-3 py-2 rounded-lg
text-gray-600 hover:bg-gray-100 hover:text-gray-900 text-sm transition-colors">
<svg class="w-5 h-5"></svg>
Analytics
</a>
<div class="pt-4 pb-1 px-3 text-xs font-semibold text-gray-400 uppercase tracking-wider">
Settings
</div>
</nav>
<div class="p-4 border-t border-gray-100">
<div class="flex items-center gap-3">
<img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
<div class="text-sm">
<div class="font-medium text-gray-900">Jane Doe</div>
<div class="text-gray-500 text-xs">Admin</div>
</div>
</div>
</div>
</aside>
<main class="flex-1 overflow-y-auto">
<header class="h-16 bg-white border-b border-gray-200 flex items-center
justify-between px-6 sticky top-0 z-10">
<h1 class="text-lg font-semibold text-gray-900">Dashboard</h1>
<div class="flex items-center gap-4">
</div>
</header>
<div class="p-6">
</div>
</main>
</div>
Sidebar Behavior
- Desktop (lg+): Always visible, 240–280px wide.
- Tablet (md): Collapsible to icon-only (64px) with tooltip labels.
- Mobile (sm): Hidden, opens as overlay with backdrop.
Pattern B: Top Nav + Grid
- Best for simpler dashboards with fewer navigation items.
- Horizontal nav bar at top, content fills below.
- Use tabs or pill navigation for sub-sections.
2. Data Cards (KPI Tiles)
Standard Stat Card
<div class="bg-white rounded-xl border border-gray-200 p-6">
<div class="flex items-center justify-between">
<span class="text-sm font-medium text-gray-500">Total Revenue</span>
<span class="w-10 h-10 rounded-lg bg-emerald-50 text-emerald-600
flex items-center justify-center">
<svg class="w-5 h-5"></svg>
</span>
</div>
<div class="mt-3">
<span class="text-3xl font-bold text-gray-900">$45,231</span>
</div>
<div class="mt-2 flex items-center gap-1.5 text-sm">
<span class="text-emerald-600 font-medium flex items-center gap-0.5">
<svg class="w-4 h-4"></svg>
12.5%
</span>
<span class="text-gray-400">vs last month</span>
</div>
</div>
Card Grid Layout
<div class="grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4 md:gap-6">
</div>
Card Variants
- With sparkline: Add a small inline chart below the number.
- With progress bar: Show completion toward a goal.
- With mini table: Top 3 items listed below the stat.
- Negative trend: Use red with down-arrow for declining metrics.
3. Chart Selection Guide
| Data Type | Best Chart | When to Use |
|---|
| Trend over time | Line chart | Revenue, users, performance over days/months |
| Comparison | Bar chart | Compare categories, A/B results |
| Composition | Pie / Donut | Budget breakdown, traffic sources (max 5 slices) |
| Volume over time | Area chart | Bandwidth, cumulative metrics |
| Distribution | Histogram | Age ranges, price ranges |
| Relationship | Scatter plot | Correlation between two variables |
| Progress | Progress bar / Gauge | Goal completion, quotas |
| Ranking | Horizontal bar | Top pages, top products |
Chart Design Rules
- Title every chart with what it shows, not how to read it.
- Label axes clearly. Include units.
- Limit colors to 5–6 max. Use your primary palette.
- Start Y-axis at zero for bar charts. Line charts can have non-zero baselines.
- Add tooltips for exact values on hover.
- Use grid lines sparingly — light dashed lines, not solid.
- Responsive: Charts should resize, not overflow.
Chart Color Palette
:root {
--chart-1: oklch(65% 0.2 265);
--chart-2: oklch(70% 0.2 165);
--chart-3: oklch(75% 0.2 320);
--chart-4: oklch(80% 0.15 80);
--chart-5: oklch(65% 0.15 145);
}
4. Table Design
Full-Featured Data Table
<div class="bg-white rounded-xl border border-gray-200 overflow-hidden">
<div class="px-6 py-4 border-b border-gray-100 flex items-center justify-between">
<div class="flex items-center gap-3">
<h2 class="font-semibold text-gray-900">Recent Orders</h2>
<span class="bg-gray-100 text-gray-600 text-xs font-medium px-2.5 py-0.5 rounded-full">
2,847
</span>
</div>
<div class="flex items-center gap-2">
<input type="text" placeholder="Search..."
class="text-sm border border-gray-200 rounded-lg px-3 py-1.5 w-56
focus:border-indigo-500 focus:ring-1 focus:ring-indigo-500/20" />
<button class="text-sm text-gray-600 border border-gray-200 rounded-lg
px-3 py-1.5 hover:bg-gray-50 flex items-center gap-1.5">
<svg class="w-4 h-4"></svg>
Filters
</button>
</div>
</div>
<table class="w-full text-sm">
<thead>
<tr class="border-b border-gray-100 text-left">
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
<button class="flex items-center gap-1 hover:text-gray-700">
Customer
<svg class="w-3 h-3"></svg>
</button>
</th>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider">
Status
</th>
<th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider
text-right">
Amount
</th>
<th class="px-6 py-3 w-12"></th>
</tr>
</thead>
<tbody class="divide-y divide-gray-50">
<tr class="hover:bg-gray-50 transition-colors">
<td class="px-6 py-4">
<div class="flex items-center gap-3">
<img src="/avatar.jpg" alt="" class="w-8 h-8 rounded-full" />
<div>
<div class="font-medium text-gray-900">Jane Cooper</div>
<div class="text-gray-500 text-xs">jane@example.com</div>
</div>
</div>
</td>
<td class="px-6 py-4">
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full
text-xs font-medium bg-emerald-50 text-emerald-700">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Completed
</span>
</td>
<td class="px-6 py-4 text-right font-medium text-gray-900">$2,500.00</td>
<td class="px-6 py-4">
<button class="text-gray-400 hover:text-gray-600">
<svg class="w-5 h-5"></svg>
</button>
</td>
</tr>
</tbody>
</table>
<div class="px-6 py-4 border-t border-gray-100 flex items-center justify-between text-sm">
<span class="text-gray-500">Showing 1-10 of 2,847</span>
<div class="flex gap-1">
<button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
hover:bg-gray-50 disabled:opacity-50" disabled>Previous</button>
<button class="px-3 py-1.5 rounded-lg bg-indigo-600 text-white">1</button>
<button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
hover:bg-gray-50">2</button>
<button class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600
hover:bg-gray-50">Next</button>
</div>
</div>
</div>
Table Design Rules
- Align numbers right, text left.
- Use row hover highlight (
hover:bg-gray-50).
- Sticky header on scroll (
sticky top-0).
- Zebra striping is optional; subtle dividers are preferred.
- Row actions: icon button (three dots) that opens a dropdown.
5. Status Indicators
Badge Styles
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
font-medium bg-emerald-50 text-emerald-700">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>Active
</span>
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
font-medium bg-amber-50 text-amber-700">
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>Pending
</span>
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
font-medium bg-red-50 text-red-700">
<span class="w-1.5 h-1.5 rounded-full bg-red-500"></span>Failed
</span>
<span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs
font-medium bg-gray-100 text-gray-600">
<span class="w-1.5 h-1.5 rounded-full bg-gray-400"></span>Draft
</span>
Progress Bars
<div class="w-full bg-gray-100 rounded-full h-2">
<div class="bg-indigo-600 h-2 rounded-full transition-all duration-500"
style="width: 65%"></div>
</div>
6. Dark Mode Dashboard
Dashboards often look better in dark mode — it reduces eye strain for data-heavy views.
Surface Hierarchy (Dark)
:root[data-theme="dark"] {
--bg-base: oklch(15% 0.01 265);
--bg-surface: oklch(20% 0.01 265);
--bg-elevated: oklch(25% 0.01 265);
--border: oklch(30% 0.01 265);
--text-primary: oklch(95% 0 0);
--text-secondary: oklch(70% 0 0);
--text-muted: oklch(50% 0 0);
}
Rules
- Elevation is shown through lighter surfaces, not shadows.
- Reduce chart color saturation by ~15%.
- Use semi-transparent borders (
oklch(100% 0 0 / 0.08)).
- Active sidebar item: lighter background, not colored.
7. Real-Time Data Indicators
Live Pulse Dot
<span class="relative flex h-2.5 w-2.5">
<span class="animate-ping absolute inline-flex h-full w-full rounded-full
bg-emerald-400 opacity-75"></span>
<span class="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
</span>
Last Updated Timestamp
<span class="text-xs text-gray-400 flex items-center gap-1.5">
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
Live — Updated 3s ago
</span>
Auto-Refresh Pattern
- Show a subtle countdown or progress bar before refresh.
- Animate changed values (flash green for increase, red for decrease).
- Never refresh the entire page — update individual data points.
8. Dense Information Without Clutter
Techniques
- Progressive disclosure: Show summary, expand for details.
- Tabbed sections: Don't show everything at once.
- Collapsible panels: Let users hide what they don't need.
- Tooltips over labels: Save space, add context on hover.
- Consistent spacing: Use a strict 4px grid (4, 8, 12, 16, 24, 32, 48).
- Smaller base font: Dashboard body text can be 13–14px.
- Monospace for data: Numbers in tables use tabular-nums.
.data-table td {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum";
}
9. Responsive Dashboard Layouts
Breakpoint Strategy
- Mobile (< 768px): Single column. Cards stack. Tables become card lists. Sidebar hidden.
- Tablet (768–1024px): 2-column grid. Sidebar collapsed to icons. Simplified charts.
- Desktop (1024px+): Full layout. Sidebar expanded. Multi-column grids.
- Wide (1536px+): Add extra column or widen content area. Don't stretch beyond 1440px max.
Mobile Table Alternative
On mobile, convert tables to stacked cards:
<div class="sm:hidden bg-white rounded-xl border border-gray-200 p-4 space-y-2">
<div class="flex justify-between">
<span class="text-gray-500 text-sm">Customer</span>
<span class="font-medium text-gray-900 text-sm">Jane Cooper</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500 text-sm">Status</span>
<span class="bg-emerald-50 text-emerald-700 text-xs px-2 py-0.5 rounded-full">Active</span>
</div>
<div class="flex justify-between">
<span class="text-gray-500 text-sm">Amount</span>
<span class="font-medium text-gray-900 text-sm">$2,500.00</span>
</div>
</div>
Dashboard Design Checklist
