Dashboard

An analytics overview screen: a responsive app shell with a collapsible sidebar, a header with search and a user menu, a row of stat KPIs, two charts, and a table of recent activity. Resize the frame (or use the viewport switcher) to watch the layout reflow and the sidebar collapse into a drawer.

Preview full screen

Use it

This example is one self-contained file. In your own project, link the JLDS stylesheets and the behavior bundle from the CDN, then paste the markup. See Vanilla HTML for the full no-framework workflow.

<!-- Design tokens + base (always first) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/index.css">
<!-- Everything, or link the per-component files you use -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/css/all.css">
<!-- Behavior: responsive drawer, charts, menus -->
<script src="https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/js/all.js" defer></script>

Then grab the full page source:

curl -O https://cdn.jsdelivr.net/gh/jarooda/jlds@main/registry/examples/dashboard.html

Components used

App Shell · Sidebar · Input · Icon Button · Avatar · Dropdown Menu · Stat · Card · Chart · Table · Badge · Button