Dashboard

Your SaaS application starting point: sidebar, topbar, KPI strip, tabbed panels and a data table — all from the shared sheet.

SaaS Starter Template — copy this folder, point the sidebar links at your router and replace the KPI numbers with your API. The theme toggle, account dropdown, tab panels, modal and toast are wired by styles/mue.js.

Key metrics

MRR $24,500 12% vs last month

Customers 1,240 38 new this week

Churn 3.4% 0.6 pt vs last month

Active trials 86 42 convert this cycle

Customer activity

Recent customers

View all

Customers acquired in the last 7 days
Customer	Plan	Status	MRR	Joined
Acme Corp	Professional	Active	$1,200	2 days ago
Globex	Starter	Active	$49	1 week ago
Initech	Enterprise	Trialing	$2,400	3 weeks ago

Quick actions

Plan mix

Export CSV

Subscriptions by plan over 30 days
Plan	Customers	MRR	Change
Enterprise	18	$43,200	+4
Professional	142	$16,980	+11
Starter	1,080	$52,920	-23

Markup

<div class="app">
  <aside class="sidebar" aria-label="Main navigation">
    <div class="sidebar-brand">SAAS</div>
    <nav class="sidebar-section" aria-label="Workspace">
      <div class="sidebar-heading">Workspace</div>
      <a class="sidebar-link" href="#" aria-current="page">…<span class="sidebar-label">Dashboard</span></a>
    </nav>
  </aside>

  <div class="main">
    <header class="navbar" role="banner">…</header>

    <main class="shell dash">
      <h1>Dashboard</h1>
      <p class="subtitle">…</p>

      <div class="alert alert-info" role="note">
        <span class="alert-icon" aria-hidden="true">…</span>
        <span><strong>SaaS Starter Template</strong> — …</span>
      </div>

      <section class="section">
        <h2>Key metrics</h2>
        <div class="metric-row">…</div>
      </section>

      <div class="dashboard-grid">…</div>
    </main>
  </div>
</div>