A dark-theme analytics dashboard built without any framework – just semantic HTML, SCSS and plain JavaScript.
What’s in it
Sidebar – the shadcn/ui sidebar mechanics (gap + fixed-container trick, offcanvas collapse, inset variant, mobile drawer) reimplemented in pure CSS with a small DOM/event state layer instead of React context. Collapses to a drawer below 768px.
Charts – Chart.js 4: a multi-ring radial chart, a stacked bar chart and a half-circle gauge. The center values are DOM elements sized in cqw, so they scale with their container instead of being baked into the canvas.
Animated stats – countUp.js drives every figure. Each value’s final width is reserved before the animation starts, so counting up from zero never pushes neighbouring badges or legends around, and prefers-reduced-motion is respected.
Orders table – a real
with custom-styled checkboxes, a working select-all (including the indeterminate state), status badges, zebra rows and horizontal scrolling on narrow screens.
Under the hood – BEM naming, SCSS design tokens (color scale, shadows, typography mixins in rem with unitless line-heights) and container queries for the responsive grids.
Design inspiration: https://www.figma.com/community/file/1325597018063319916