Dashboard UI Pack

Twelve responsive dashboard UI components for metrics, activity, filters, navigation and empty states.

12 distinct patterns6 frontend formats0 runtime dependencies

Free for personal and commercial projects. No attribution required.

Browse patterns View components

Pack options

Choose one portable format

The selected format applies to code panels and downloads.

Format

KPI and Stat Card

A concise metric card with a labelled comparison that does not imply live data.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KPI and Stat Card</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <article class="dy-dashboard dy-panel dy-kpi"><p>Example open tasks</p><strong>24</strong><span>4 fewer than the previous sample period</span></article>
</body>
</html>

KPI Grid

A responsive three-card metric grid with explicit labels and illustrative sample values.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>KPI Grid</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-dashboard dy-grid" aria-label="Example project metrics"><article class="dy-panel dy-kpi"><p>Projects</p><strong>8</strong><span>sample value</span></article><article class="dy-panel dy-kpi"><p>Reviews</p><strong>13</strong><span>sample value</span></article><article class="dy-panel dy-kpi"><p>Tasks</p><strong>42</strong><span>sample value</span></article></section>
</body>
</html>

Activity List

A semantic recent-activity list with readable event descriptions and timestamps.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Activity List</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-dashboard dy-panel"><h2>Example activity</h2><ol class="dy-list"><li><span><strong>Alex</strong> updated the homepage brief</span><time datetime="2026-08-20T09:30">09:30</time></li><li><span><strong>Sam</strong> added a review note</span><time datetime="2026-08-20T08:15">08:15</time></li></ol></section>
</body>
</html>

User Row

A reusable team row with identity, role and a clearly labelled action.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>User Row</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="dy-dashboard dy-panel dy-row"><div><strong>Alex Morgan</strong><p>Product designer</p></div><span class="dy-badge">Active</span><button type="button" aria-label="Open actions for Alex Morgan">Actions</button></div>
</body>
</html>

Status Badge

A compact status treatment that pairs colour with explicit text.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Status Badge</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="dy-dashboard dy-panel"><p>Deployment status</p><span class="dy-badge"><span aria-hidden="true">●</span>&nbsp; Ready for review</span></div>
</body>
</html>

Dashboard Header

A responsive application heading with context, secondary action and clear primary action.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Header</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="dy-dashboard dy-panel dy-header"><div><p>Example workspace</p><h2>Project overview</h2></div><div class="dy-actions"><a href="#export">Export</a><a href="#new">New project</a></div></header>
</body>
</html>

Dashboard Sidebar

A compact labelled sidebar using link semantics and current-page state.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Dashboard Sidebar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <nav class="dy-dashboard dy-panel dy-sidebar-panel" aria-label="Dashboard"><strong>Example workspace</strong><a href="#overview" aria-current="page">Overview</a><a href="#projects">Projects</a><a href="#reports">Reports</a><a href="#settings">Settings</a></nav>
</body>
</html>

Quick Actions

A focused group of clearly named dashboard actions with comfortable touch targets.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Quick Actions</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-dashboard dy-panel"><h2>Quick actions</h2><div class="dy-actions"><button type="button">Create task</button><button type="button">Invite teammate</button><button type="button">Add note</button></div></section>
</body>
</html>

Empty Dashboard State

A calm empty state explaining what is missing and offering one useful next step.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Empty Dashboard State</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-dashboard dy-panel dy-empty"><h2>No projects yet</h2><p>Create a project to organise tasks, notes and review activity.</p><a href="#create">Create first project</a></section>
</body>
</html>

Data Summary

A semantic data table for compact labelled values without a charting dependency.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Data Summary</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <section class="dy-dashboard dy-panel"><h2>Example channel summary</h2><table class="dy-summary"><thead><tr><th scope="col">Channel</th><th scope="col">Visits</th><th scope="col">Share</th></tr></thead><tbody><tr><th scope="row">Direct</th><td>1,240</td><td>48%</td></tr><tr><th scope="row">Search</th><td>860</td><td>33%</td></tr></tbody></table></section>
</body>
</html>

Filter Bar

A responsive filter toolbar with programmatic labels and native controls.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Filter Bar</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <form class="dy-dashboard dy-panel dy-filters"><label for="period">Period <select id="period"><option>Last 7 days</option><option>Last 30 days</option></select></label><label for="status">Status <select id="status"><option>All statuses</option><option>Active</option></select></label><button type="button">Apply filters</button></form>
</body>
</html>

Notification Panel

A labelled notification summary that distinguishes informational content from alerts.

HTML + CSSindex.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Notification Panel</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <aside class="dy-dashboard dy-panel" aria-labelledby="notifications-title"><h2 id="notifications-title">Notifications</h2><div class="dy-notice"><strong>Review requested</strong><p>The homepage brief is ready for your example review.</p><a href="#review">Open review</a></div></aside>
</body>
</html>

Implementation

Portable UI, with clear boundaries.

All values and activity are illustrative static content. Connect patterns to trusted application data and behaviour; no backend, live updates or dashboard architecture is included.

How to use

Choose the format used by your project.
Preview and copy one pattern, or download a focused ZIP.
Replace the example content and connect controls to real application behaviour.
Test keyboard access, contrast, validation and responsive behaviour in your final context.

FAQ

Dashboard UI Pack questions

What formats does the Dashboard UI Pack include?

The pack provides 6 focused frontend formats. Choose one format before copying or downloading so the archive stays small.

Do these patterns require third-party packages?

No runtime package is required. Tailwind-labelled downloads expect Tailwind CSS to already be configured in the receiving project.

Can I download one pattern?

Yes. Each pattern has its own ZIP, and the page also creates a complete pack ZIP for the selected format.