Section
Dashboard Preview
Mock dashboard preview with sidebar, KPIs and a bar chart.
- Section
- Vanilla
- HTML
- MIT
Preview
Live section
No interactive preview for this section.
Install it with the CLI below, or read the implementation on this page.
Install
Add to your project
npx devsnips add Vanilla/Sections/Products/product-dashboard-preview Vanilla/Sections/Products/product-dashboard-preview <!-- Snippet Name: Dashboard Preview | Family: Products | Description: Mock dashboard preview with sidebar, KPIs and a bar chart. | Author: DevSnips Contributors | Usage: Copy the .nb section into your page. -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard Preview | DevSnips</title>
<meta name="description" content="Neo-brutalist vanilla HTML/CSS/JS section: product-dashboard-preview. Copy, customize, ship.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<style> /* ---- Neo-Brutalist design tokens ---- */
:root{
--bg:#fbfbf9; --surface:#ffffff; --foreground:#0a0a0a; --muted:#525252;
--border:#0a0a0a; --primary:#4f46e5; --primary-fg:#ffffff;
--accent:#facc15; --pink:#ec4899; --lime:#a3e635; --cyan:#22d3ee;
--radius:6px; --radius-lg:10px;
--shadow:4px 4px 0 var(--border); --shadow-lg:8px 8px 0 var(--border);
--ring:0 0 0 3px #fff, 0 0 0 6px var(--primary);
--container:1200px; --gutter:20px;
--fs-h1:clamp(2.4rem,6vw,4.25rem); --fs-h2:clamp(1.9rem,4vw,2.9rem);
--fs-h3:clamp(1.25rem,2.4vw,1.6rem); --fs-lead:clamp(1.05rem,2vw,1.25rem);
--ff:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){
:root{ --bg:#0a0a0a; --surface:#151515; --foreground:#fafafa; --muted:#a3a3a3;
--border:#fafafa; --ring:0 0 0 3px #000, 0 0 0 6px var(--primary); }
}
/* ---- base layout + components ---- */
*{box-sizing:border-box}
.nb{font-family:var(--ff);background:var(--bg);color:var(--foreground);
line-height:1.6;-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.nb section{position:relative;padding-block:clamp(56px,9vw,120px)}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:800;letter-spacing:-.02em;line-height:1.08;margin:0}
.nb h1{font-size:var(--fs-h1)} .nb h2{font-size:var(--fs-h2)} .nb h3{font-size:var(--fs-h3)}
.nb p{margin:0} .nb a{color:inherit}
.nb .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;
font-weight:700;text-transform:uppercase;letter-spacing:.14em;
border:2px solid var(--border);background:var(--surface);padding:6px 12px;
border-radius:999px;box-shadow:var(--shadow)}
.nb .lead{font-size:var(--fs-lead);color:var(--muted);max-width:62ch}
.nb .muted{color:var(--muted)}
.nb .center{text-align:center;margin-inline:auto}
.nb .grid{display:grid;gap:var(--gutter)}
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font:inherit;font-weight:700;font-size:.98rem;line-height:1;cursor:pointer;
text-decoration:none;border:3px solid var(--border);border-radius:var(--radius);
padding:14px 22px;background:var(--primary);color:var(--primary-fg);
box-shadow:var(--shadow);transition:transform .12s ease,box-shadow .12s ease,background .12s}
.nb .btn:hover{transform:translate(-2px,-2px);box-shadow:var(--shadow-lg)}
.nb .btn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--border)}
.nb .btn.outline{background:var(--surface);color:var(--foreground)}
.nb .btn.ghost{background:transparent;border-color:transparent;box-shadow:none}
.nb .btn.ghost:hover{box-shadow:var(--shadow);border-color:var(--border);transform:translate(-2px,-2px)}
.nb .btn.accent{background:var(--accent);color:#0a0a0a}
.nb .card{background:var(--surface);border:3px solid var(--border);border-radius:var(--radius);
box-shadow:var(--shadow);padding:24px;transition:transform .14s ease,box-shadow .14s ease}
.nb .card.hover:hover{transform:translate(-3px,-3px);box-shadow:var(--shadow-lg)}
.nb .badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;
text-transform:uppercase;letter-spacing:.08em;border:2px solid var(--border);
padding:4px 10px;border-radius:999px;background:var(--surface)}
.nb :focus-visible{outline:none;box-shadow:var(--ring);border-radius:4px}
.nb .skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:#000;
padding:10px 16px;border:2px solid var(--border);z-index:50;font-weight:700}
.nb .skip:focus{left:8px}
.nb .visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;
clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
@media (prefers-reduced-motion:reduce){
.nb *,.nb *::before,.nb *::after{animation-duration:.001ms!important;
transition-duration:.001ms!important;animation-iteration-count:1!important}
}
.pd .head{text-align:center;margin-bottom:30px}.pd .head h2{margin:12px 0 8px}
.pd .dash{border:3px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background:var(--surface);overflow:hidden}
.pd .topbar{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:3px solid var(--border)}
.pd .topbar i{width:11px;height:11px;border-radius:50%;background:var(--border)}
.pd .topbar i:nth-child(1){background:#ff5f57}.pd .topbar i:nth-child(2){background:#febc2e}.pd .topbar i:nth-child(3){background:#28c840}
.pd .topbar .url{margin-left:10px;border:2px solid var(--border);border-radius:6px;padding:5px 12px;font-size:.8rem;color:var(--muted);flex:1}
.pd .body{display:grid;grid-template-columns:1fr;gap:0}
.pd .side{display:none;border-right:3px solid var(--border);padding:16px}
.pd .side a{display:block;padding:9px 10px;border-radius:6px;font-weight:600;color:var(--muted)}
.pd .side a.cur{background:var(--bg);color:var(--foreground);box-shadow:var(--shadow)}
.pd .main{padding:18px;display:grid;gap:14px}
.pd .cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.pd .cards .c{border:2px solid var(--border);border-radius:8px;padding:14px}
.pd .cards .c b{font-size:1.4rem}.pd .cards .c small{color:var(--muted)}
.pd .chart{border:2px solid var(--border);border-radius:8px;padding:16px;height:160px;display:flex;align-items:flex-end;gap:6px}
.pd .chart i{flex:1;background:var(--primary);border:2px solid var(--border);border-radius:4px 4px 0 0}
@media(min-width:820px){.pd .body{grid-template-columns:200px 1fr}.pd .side{display:block}.pd .cards{grid-template-columns:repeat(3,1fr)}}</style>
</head>
<body class="nb">
<a class="skip" href="#main">Skip to content</a>
<section class="pd" aria-labelledby="pd-title">
<div class="container">
<div class="head"><span class="eyebrow"><svg class="is" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d='M3 3v18h18M7 14l3-4 4 3 5-7'/></svg> Dashboard</span><h2 id="pd-title">See your business at a glance.</h2><p class="lead">A mock dashboard preview you can drop your own data into.</p></div>
<div class="dash" role="img" aria-label="Dashboard preview">
<div class="topbar"><i></i><i></i><i></i><span class="url">app.devsnips.io/dashboard</span></div>
<div class="body">
<aside class="side"><a class="cur">Overview</a><a>Revenue</a><a>Customers</a><a>Funnels</a><a>Reports</a></aside>
<div class="main">
<div class="cards">
<div class="c"><b>$48.2k</b><small>MRR · +12%</small></div>
<div class="c"><b>1,204</b><small>users · +38</small></div>
<div class="c"><b>1.4%</b><small>churn · -0.3</small></div>
</div>
<div class="chart" aria-label="Revenue bar chart"><i style="height:40%"></i><i style="height:65%"></i><i style="height:52%"></i><i style="height:80%"></i><i style="height:70%"></i><i style="height:95%"></i><i style="height:60%"></i><i style="height:75%"></i></div>
</div>
</div>
</div>
</div>
</section>
</body>
</html># Dashboard Preview
Mock dashboard preview with sidebar, KPIs and a bar chart.
**Technology:** Vanilla HTML/CSS/JS
**Category:** sections / products
**Design:** Neo-Brutalist (flat colors, hard shadows, bold borders)
**Responsive:** Mobile-first (320px → 1920px)
**Dark mode:** via `prefers-color-scheme`
**Tags:** product, dashboard, preview
**Features:** light/dark, responsive, accessible chart
## Usage
1. Copy the contents of `code.html` into your page.
2. The section is self-contained (inline CSS + JS). No build step.
3. Tweak the CSS variables in `:root` to rebrand. 115 lines UTF-8 · LF · Spaces: 2
Continue browsing