Dashboard Snippets — Free HTML CSS JS Dashboard Components

Dashboard components display operational data, track progress, and enable workflow management. Building a dashboard from scratch requires solving several specific technical challenges: animated metric reveals, drag-and-drop task management, a persistent app shell layout, activity visualisation, and real-time notification state. This collection covers five essential dashboard building blocks — from animated KPI cards to a complete app layout shell.

Every snippet is plain HTML, CSS, and minimal vanilla JavaScript. No charting library, no grid framework, no component library required.

Stats Card with activity heatmap and SVG progress ring. The count-up animation uses IntersectionObserver with threshold: 0.5 — the animation fires exactly once when 50% of the element enters the viewport. obs.disconnect() prevents it from re-firing on scroll back. The animation itself uses requestAnimationFrame with a quartic ease-out curve: progress = 1 - Math.pow(1 - t, 4), where t is elapsed time divided by duration. This creates a fast-start, slow-decelerate reveal that feels dramatic. Numbers over 1000 auto-format to K; over 1000000 to M.

The activity heatmap generates a 52 × 7 grid of day cells with 6 colour intensity levels — using JavaScript to fill random (or real API) activity data into a GitHub-style contribution graph. Each cell is a small div with background colour determined by its activity count.

Dashboard Layout is a complete flex app shell: a 180px fixed dark sidebar with nav links, a top header bar, and a main content area with overflow-y: auto. The sidebar and header are fixed; the main content scrolls independently. This is the foundational structure of any admin panel or SaaS dashboard.

Kanban Board uses the HTML5 Drag and Drop API — no library. draggable="true" on each card. dragstart stores the dragged card in a variable. dragover calls e.preventDefault() to allow the drop. drop appends the stored card to the target column and updates the live card count. A setTimeout(0) delay before adding the .dragging class prevents the ghost image from showing the dimmed card state during drag.

User Stats Card features a GitHub-style 12-week activity heatmap, a circular SVG progress ring, a gradient avatar, follower/following stats, and a follow button toggle. All built with DOM manipulation and SVG — no charting library.

Notification Bell shows an unread badge count, a dropdown panel with notification items, mark-as-read per item and mark-all-read batch action, and click-outside close. The bell icon animates with a CSS ring-swing keyframe when the badge count is non-zero.