Dashboard — Vanilla

Dashboard layout with vanilla HTML. Sidebar + main content. Ensure Rizzo CSS is loaded.

Dashboard component

Two-column layout: a sidebar (for navigation) and a main content area. Uses BEM classes: dashboard, dashboard__sidebar, dashboard__main, dashboard__nav, dashboard__nav-link. On small screens the layout stacks vertically. No JavaScript required for the layout.

Add this component

The command below includes <strong>Dashboard</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun

BEM classes

  • dashboard — Root flex container (column on mobile).
  • dashboard__sidebar — Sidebar column; use aria-label for the sidebar (e.g. "App navigation").
  • dashboard__nav — Nav container inside sidebar.
  • dashboard__nav-link — Nav link; use dashboard__nav-link--active for current page and aria-current="page".
  • dashboard__main — Main content area (use id="main-content" for skip-link target).

Live example

Below is the same structure as the Astro/Svelte Dashboard; in Vanilla you use the HTML directly.

Live example

Dashboard

Overview. Same structure as the Dashboard block.

Key metrics

Total users 1,234
Revenue $12,345
Active 89%

Recent activity

Recent activity list
Name Status Date
Item one Done Today
Item two Pending Yesterday
Item three Failed Jan 15

Copyable HTML

html html 
<div class="dashboard">
  <aside class="dashboard__sidebar" aria-label="Dashboard navigation">
    <nav class="dashboard__nav">
      <a href="/dashboard" class="dashboard__nav-link dashboard__nav-link--active" aria-current="page">Dashboard</a>
      <a href="/items" class="dashboard__nav-link">Items</a>
      <a href="/settings" class="dashboard__nav-link">Settings</a>
    </nav>
  </aside>
  <main id="main-content" class="dashboard__main">
    <div class="dashboard-page">
      <header class="dashboard-page__header">
        <h1 class="dashboard-page__title">Dashboard</h1>
        <p class="dashboard-page__subtitle">Overview.</p>
      </header>
      <section class="dashboard-page__stats" aria-labelledby="stats-heading">
        <h2 id="stats-heading" class="sr-only">Key metrics</h2>
        <div class="dashboard-page__stats-grid">
          <div class="card dashboard-page__stat"><div class="card__body"><span class="card__label">Total users</span><span class="card__value">1,234</span></div></div>
          <div class="card dashboard-page__stat"><div class="card__body"><span class="card__label">Revenue</span><span class="card__value">$12,345</span></div></div>
          <div class="card dashboard-page__stat"><div class="card__body"><span class="card__label">Active</span><span class="card__value">89%</span></div></div>
        </div>
      </section>
      <section class="dashboard-page__table" aria-labelledby="table-heading">
        <h2 id="table-heading" class="dashboard-page__section-title">Recent activity</h2>
        <div class="table-wrapper">
          <table class="table">
            <caption class="sr-only">Recent activity list</caption>
            <thead><tr class="table__row"><th scope="col" class="table__cell table__cell--header">Name</th><th scope="col" class="table__cell table__cell--header">Status</th><th scope="col" class="table__cell table__cell--header">Date</th></tr></thead>
            <tbody>
              <tr class="table__row"><td class="table__cell">Item one</td><td class="table__cell"><span class="badge badge--success">Done</span></td><td class="table__cell">Today</td></tr>
              <tr class="table__row"><td class="table__cell">Item two</td><td class="table__cell"><span class="badge badge--warning">Pending</span></td><td class="table__cell">Yesterday</td></tr>
              <tr class="table__row"><td class="table__cell">Item three</td><td class="table__cell"><span class="badge badge--error">Failed</span></td><td class="table__cell">Jan 15</td></tr>
            </tbody>
          </table>
        </div>
      </section>
    </div>
  </main>
</div>

Other frameworks: Astro ¡ Svelte ¡ Vue ¡ React

See the Dashboard with sidebar block for a full example with stat cards and a table.