Admin Starter Template — Dense layout for internal tools. Includes nav, topbar, KPI cards, orders table, and activity panel. Wire to your admin API.

Admin overview

Manage users, orders, and store performance.

Total orders
4,820
Revenue
$124,500
New users
520
Pending
86

Recent orders

View all
OrderCustomerAmountStatus
#40291Alex Morgan$219.00Delivered
#40290Sam Rivera$89.50Processing
#40289Jules Kim$340.00Delivered

System status

APIHealthy
DatabaseHealthy
QueueDelayed
App shell markup
<div class="app">
  <aside class="sidebar" aria-label="Main navigation">
    <div class="sidebar-brand">ADMIN</div>
    <nav class="sidebar-section">
      <a class="sidebar-link active" href="#" aria-current="page">…</a>
    </nav>
  </aside>

  <div class="main">
    <header class="navbar">
      <div class="field input-icon nav-search">…</div>
      <span class="nav-spacer"></span>
      <button class="theme-toggle" type="button" data-theme-toggle aria-label="Toggle dark mode">
        <span data-theme-state>Dark mode</span><span class="dot" aria-hidden="true"></span>
      </button>
    </header>

    <div class="content">
      <div class="page-head">
        <h1>Admin overview</h1>
        <p>Manage users, orders, and store performance.</p>
      </div>
      <div class="content-grid">…</div>
    </div>
  </div>
</div>

<!-- One value per page: --grid-cols replaces the shared 2fr 1fr split.
     At 900px the sheet stacks .app and collapses .content-grid to 1fr. -->
<div class="content-grid" style="--grid-cols: 3fr 2fr">…</div>