Section
Dashboard Overview — Neo-Brutalism
Brutalist analytics dashboard overview with KPI stat cards and trend deltas, a pure-SVG dual bar chart, a recent-activity feed, and a wired 7d/30d/90d range selector that swaps hardcoded datasets live. Hard black borders, offset drop shadows, and flat bright accents.
- Section
- Tailwind
- HTML
- MIT
Preview
Live section
9:41 100%
devsnips.dev/library/tailwind/sections/app-ui/dashboard-overview/neo-brutalism/ fluid · no fixed width 100%
Install
Add to your project
npx devsnips add Tailwind/Sections/App-UI/dashboard-overview/neo-brutalism Tailwind/Sections/App-UI/dashboard-overview/neo-brutalism <!--
Snippet Name: Dashboard Overview — Neo-Brutalism
Description: Brutalist analytics dashboard with KPI stat cards, a pure-SVG bar chart, an activity feed, and a wired 7d/30d/90d range switcher that swaps hardcoded datasets.
Author: DevSnips Contributors
Usage Example: Drop into any app shell as an analytics overview. The range selector updates KPI values, deltas, and the chart in preview.html.
-->
<div class="relative w-full" data-dash="nb">
<!-- Panel -->
<div class="border-2 border-black bg-[#FFFDF5] shadow-[8px_8px_0_0_#000]">
<!-- Header / toolbar -->
<div class="flex flex-col gap-4 border-b-2 border-black bg-white px-5 py-4 sm:flex-row sm:items-center sm:justify-between sm:px-6">
<div class="flex items-center gap-3">
<div class="flex h-11 w-11 items-center justify-center border-2 border-black bg-[#FFE600] shadow-[3px_3px_0_0_#000]">
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" aria-hidden="true">
<path d="M3 20h18M5 20V11M10 20V7M15 20v-6M20 20V5" />
</svg>
</div>
<div>
<p class="font-archivo text-lg font-extrabold uppercase leading-none tracking-tight">Overview</p>
<p class="mt-1.5 font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">
<span class="inline-block h-2 w-2 border border-black bg-[#00E676]"></span>
LIVE · UPDATED 2 MIN AGO
</p>
</div>
</div>
<!-- Range selector -->
<div role="group" aria-label="Time range" class="flex w-fit items-center border-2 border-black bg-[#FFFDF5] shadow-[3px_3px_0_0_#000]">
<button type="button" data-range="7" class="nb-range font-mono text-[11px] font-bold uppercase px-3.5 py-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">7d</button>
<button type="button" data-range="30" class="nb-range border-x-2 border-black font-mono text-[11px] font-bold uppercase px-3.5 py-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">30d</button>
<button type="button" data-range="90" class="nb-range font-mono text-[11px] font-bold uppercase px-3.5 py-2 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">90d</button>
</div>
</div>
<!-- KPI cards -->
<div class="grid grid-cols-1 gap-0 border-b-2 border-black sm:grid-cols-2 lg:grid-cols-4 lg:divide-x-2 lg:divide-black">
<!-- Revenue -->
<div class="border-b-2 border-black p-5 sm:border-r-0 sm:[&:nth-child(odd)]:border-r-2 sm:[&:nth-child(odd)]:border-black lg:border-r-0 lg:border-b-0 lg:[&:nth-child(odd)]:border-r-0" data-kpi="revenue">
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">Revenue</p>
<p class="mt-2 font-archivo text-3xl font-extrabold leading-none" data-kpi-value>$48,210</p>
<div class="mt-3 inline-flex items-center gap-1.5 border-2 border-black px-2 py-0.5 font-mono text-[11px] font-bold uppercase" data-kpi-delta>
<span class="inline-block h-2 w-2 bg-[#00E676]"></span>+12.4%
</div>
</div>
<!-- Active Users -->
<div class="border-b-2 border-black p-5 lg:border-b-0" data-kpi="users">
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">Active Users</p>
<p class="mt-2 font-archivo text-3xl font-extrabold leading-none" data-kpi-value>18,402</p>
<div class="mt-3 inline-flex items-center gap-1.5 border-2 border-black px-2 py-0.5 font-mono text-[11px] font-bold uppercase" data-kpi-delta>
<span class="inline-block h-2 w-2 bg-[#00E676]"></span>+8.1%
</div>
</div>
<!-- MRR -->
<div class="border-b-2 border-black p-5 sm:border-r-0 sm:[&:nth-child(odd)]:border-r-2 sm:[&:nth-child(odd)]:border-black lg:border-r-0 lg:border-b-0 lg:[&:nth-child(odd)]:border-r-0" data-kpi="mrr">
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">MRR</p>
<p class="mt-2 font-archivo text-3xl font-extrabold leading-none" data-kpi-value>$12,640</p>
<div class="mt-3 inline-flex items-center gap-1.5 border-2 border-black px-2 py-0.5 font-mono text-[11px] font-bold uppercase" data-kpi-delta>
<span class="inline-block h-2 w-2 bg-[#00E676]"></span>+5.7%
</div>
</div>
<!-- Churn -->
<div class="p-5" data-kpi="churn">
<p class="font-mono text-[11px] font-bold uppercase tracking-wider text-black/60">Churn</p>
<p class="mt-2 font-archivo text-3xl font-extrabold leading-none" data-kpi-value>2.1%</p>
<div class="mt-3 inline-flex items-center gap-1.5 border-2 border-black px-2 py-0.5 font-mono text-[11px] font-bold uppercase" data-kpi-delta>
<span class="inline-block h-2 w-2 bg-[#FF4FA3]"></span>-0.3pp
</div>
</div>
</div>
<!-- Chart + activity -->
<div class="grid grid-cols-1 lg:grid-cols-3">
<!-- Chart -->
<div class="border-b-2 border-black p-5 sm:p-6 lg:col-span-2 lg:border-b-0 lg:border-r-2">
<div class="mb-5 flex items-end justify-between">
<div>
<p class="font-archivo text-base font-extrabold uppercase tracking-tight">Revenue Trend</p>
<p class="mt-1 font-mono text-[11px] font-bold uppercase tracking-wider text-black/55">LAST <span data-range-label>30 DAYS</span></p>
</div>
<div class="flex items-center gap-3">
<span class="flex items-center gap-1.5 font-mono text-[10px] font-bold uppercase text-black/60">
<span class="inline-block h-2.5 w-2.5 border border-black bg-[#FFE600]"></span>Revenue
</span>
<span class="flex items-center gap-1.5 font-mono text-[10px] font-bold uppercase text-black/60">
<span class="inline-block h-2.5 w-2.5 border border-black bg-[#00C2FF]"></span>Prev
</span>
</div>
</div>
<div class="relative">
<svg data-chart viewBox="0 0 640 240" preserveAspectRatio="none" class="h-56 w-full sm:h-64" role="img" aria-label="Revenue trend bar chart"></svg>
<div class="mt-2 flex items-center justify-between font-mono text-[10px] font-bold uppercase text-black/45" data-chart-axis></div>
</div>
</div>
<!-- Activity feed -->
<div class="p-5 sm:p-6">
<div class="mb-4 flex items-center justify-between">
<p class="font-archivo text-base font-extrabold uppercase tracking-tight">Activity</p>
<button type="button" class="font-mono text-[10px] font-bold uppercase text-black/55 underline focus:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2">View all</button>
</div>
<ul class="space-y-3" data-activity>
<li class="flex gap-3 border-2 border-black bg-white p-3 shadow-[3px_3px_0_0_#000]">
<span class="flex h-9 w-9 shrink-0 items-center justify-center border-2 border-black bg-[#00E676] text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
</span>
<div class="min-w-0 flex-1">
<p class="font-archivo text-[13px] font-bold leading-tight">New customer upgrade</p>
<p class="mt-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-black/55">Acme Co · Pro plan · 2m ago</p>
</div>
</li>
<li class="flex gap-3 border-2 border-black bg-white p-3 shadow-[3px_3px_0_0_#000]">
<span class="flex h-9 w-9 shrink-0 items-center justify-center border-2 border-black bg-[#FFE600] text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M5 12h14M13 6l6 6-6 6" /></svg>
</span>
<div class="min-w-0 flex-1">
<p class="font-archivo text-[13px] font-bold leading-tight">Payout processed</p>
<p class="mt-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-black/55">Stripe · $4,820 · 38m ago</p>
</div>
</li>
<li class="flex gap-3 border-2 border-black bg-white p-3 shadow-[3px_3px_0_0_#000]">
<span class="flex h-9 w-9 shrink-0 items-center justify-center border-2 border-black bg-[#FF4FA3] text-white">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><path d="M6 9l6 6 6-6" /></svg>
</span>
<div class="min-w-0 flex-1">
<p class="font-archivo text-[13px] font-bold leading-tight">Churn alert resolved</p>
<p class="mt-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-black/55">Quark.io · 1h ago</p>
</div>
</li>
<li class="flex gap-3 border-2 border-black bg-white p-3 shadow-[3px_3px_0_0_#000]">
<span class="flex h-9 w-9 shrink-0 items-center justify-center border-2 border-black bg-[#00C2FF] text-black">
<svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" aria-hidden="true"><circle cx="12" cy="12" r="3" /><path d="M12 2v3M12 19v3M2 12h3M19 12h3" /></svg>
</span>
<div class="min-w-0 flex-1">
<p class="font-archivo text-[13px] font-bold leading-tight">New trial signup</p>
<p class="mt-0.5 font-mono text-[10px] font-bold uppercase tracking-wider text-black/55">Loop Labs · 3h ago</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<script>
(function () {
var root = document.currentScript.closest('[data-dash]');
if (!root) return;
// Hardcoded datasets per range
var datasets = {
7: {
labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
current: [42, 55, 48, 71, 66, 80, 95],
previous: [38, 47, 52, 60, 58, 70, 82],
kpis: {
revenue: { value: '$11,420', delta: '+9.2%', up: true },
users: { value: '4,820', delta: '+6.4%', up: true },
mrr: { value: '$12,640', delta: '+5.7%', up: true },
churn: { value: '2.1%', delta: '-0.3pp', up: false, good: true }
}
},
30: {
labels: ['W1', 'W2', 'W3', 'W4'],
current: [320, 410, 380, 510],
previous: [280, 360, 340, 460],
kpis: {
revenue: { value: '$48,210', delta: '+12.4%', up: true },
users: { value: '18,402', delta: '+8.1%', up: true },
mrr: { value: '$12,640', delta: '+5.7%', up: true },
churn: { value: '2.1%', delta: '-0.3pp', up: false, good: true }
}
},
90: {
labels: ['M1', 'M2', 'M3'],
current: [1480, 1720, 1610],
previous: [1260, 1520, 1450],
kpis: {
revenue: { value: '$142,080', delta: '+18.6%', up: true },
users: { value: '52,140', delta: '+14.2%', up: true },
mrr: { value: '$13,920', delta: '+9.3%', up: true },
churn: { value: '1.9%', delta: '-0.4pp', up: false, good: true }
}
}
};
var chart = root.querySelector('[data-chart]');
var axis = root.querySelector('[data-chart-axis]');
var rangeLabel = root.querySelector('[data-range-label]');
var buttons = root.querySelectorAll('.nb-range');
function render(range) {
var d = datasets[range];
if (!d) return;
// KPIs
['revenue', 'users', 'mrr', 'churn'].forEach(function (key) {
var card = root.querySelector('[data-kpi="' + key + '"]');
if (!card) return;
var k = d.kpis[key];
var valEl = card.querySelector('[data-kpi-value]');
var dEl = card.querySelector('[data-kpi-delta]');
if (valEl) valEl.textContent = k.value;
if (dEl) {
var dotColor = k.up ? '#00E676' : (k.good ? '#00E676' : '#FF4FA3');
dEl.innerHTML = '<span class="inline-block h-2 w-2" style="background:' + dotColor + '"></span>' + k.delta;
}
});
if (rangeLabel) rangeLabel.textContent = range + ' DAYS';
// Chart
var W = 640, H = 240, padB = 18, padT = 10, padX = 16;
var n = d.current.length;
var max = Math.max.apply(null, d.current.concat(d.previous)) * 1.12;
var barGroup = (W - padX * 2) / n;
var bw = Math.max(6, barGroup * 0.32);
var gap = Math.max(2, barGroup * 0.12);
var svg = '';
// baseline gridlines
for (var g = 0; g <= 4; g++) {
var y = padT + (H - padT - padB) * (g / 4);
svg += '<line x1="' + padX + '" y1="' + y.toFixed(1) + '" x2="' + (W - padX) + '" y2="' + y.toFixed(1) + '" stroke="#000" stroke-width="1" stroke-dasharray="2 4" opacity="0.15"/>';
}
// bars
for (var i = 0; i < n; i++) {
var cx = padX + barGroup * i + barGroup / 2;
// previous (cyan, behind)
var ph = (d.previous[i] / max) * (H - padT - padB);
svg += '<rect x="' + (cx - bw - gap / 2).toFixed(1) + '" y="' + (H - padB - ph).toFixed(1) + '" width="' + bw.toFixed(1) + '" height="' + ph.toFixed(1) + '" fill="#00C2FF" stroke="#000" stroke-width="2"/>';
// current (yellow)
var ch = (d.current[i] / max) * (H - padT - padB);
svg += '<rect x="' + (cx + gap / 2).toFixed(1) + '" y="' + (H - padB - ch).toFixed(1) + '" width="' + bw.toFixed(1) + '" height="' + ch.toFixed(1) + '" fill="#FFE600" stroke="#000" stroke-width="2"/>';
}
// baseline
svg += '<line x1="' + padX + '" y1="' + (H - padB) + '" x2="' + (W - padX) + '" y2="' + (H - padB) + '" stroke="#000" stroke-width="2.5"/>';
chart.innerHTML = svg;
// axis labels
if (axis) {
axis.innerHTML = d.labels.map(function (l) { return '<span>' + l + '</span>'; }).join('');
}
// active button
buttons.forEach(function (b) {
var active = b.dataset.range === String(range);
b.classList.toggle('bg-[#FFE600]', active);
b.classList.toggle('text-black', active);
if (active) b.setAttribute('aria-pressed', 'true'); else b.removeAttribute('aria-pressed');
});
}
buttons.forEach(function (b) {
b.addEventListener('click', function () {
render(parseInt(b.dataset.range, 10));
});
});
render(30);
})();
</script>
</div> 263 lines UTF-8 · LF · Spaces: 2
Continue browsing