6 CSS Minimalist UI Designs 01 / 06

Axiom Dashboard

A dark minimalist SaaS dashboard UI with a chartreuse #c8ff00 accent — a complete cockpit composition that proves how strategic whitespace and crisp typography reduce cognitive load on data-heavy applications.

Best forSaaS product dashboards, admin panels, analytics products, internal tools, monochrome data UIs.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="mu-sd" aria-label="Axiom SaaS dashboard demo">
  <div class="sidebar">
    <div class="logo">
      <div class="logo-mark" aria-hidden="true">
        <svg width="14" height="14" viewBox="0 0 14 14"><rect x="1" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="1" width="5" height="5" fill="#0a0a0a"/><rect x="1" y="8" width="5" height="5" fill="#0a0a0a"/><rect x="8" y="8" width="5" height="5" fill="#0a0a0a" opacity="0.4"/></svg>
      </div>
      Axiom
    </div>
    <div class="nav-section">
      <div class="nav-label">Overview</div>
      <div class="nav-item active"><div class="nav-dot"></div>Dashboard<span class="badge live">Live</span></div>
      <div class="nav-item"><div class="nav-dot"></div>Analytics</div>
      <div class="nav-item"><div class="nav-dot"></div>Reports<span class="badge">4</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Manage</div>
      <div class="nav-item"><div class="nav-dot"></div>Campaigns</div>
      <div class="nav-item"><div class="nav-dot"></div>Audiences</div>
      <div class="nav-item"><div class="nav-dot"></div>Integrations<span class="badge">New</span></div>
    </div>
    <div class="nav-section nav-section-spaced">
      <div class="nav-label">Account</div>
      <div class="nav-item"><div class="nav-dot"></div>Settings</div>
      <div class="nav-item"><div class="nav-dot"></div>Billing</div>
    </div>
    <div class="sidebar-footer">
      <div class="user-row">
        <div class="avatar">MK</div>
        <div>
          <div class="user-name">M. Kovalev</div>
          <div class="user-role">Admin · Pro</div>
        </div>
      </div>
    </div>
  </div>
  <div class="main">
    <div class="topbar">
      <div><span class="topbar-title">Overview</span><span class="topbar-sub">/ Q2 2025</span></div>
      <div class="live-dot live-dot-inline" aria-hidden="true"></div>
      <div class="topbar-right">
        <div class="tab-group" role="tablist"><div class="tab">Day</div><div class="tab active">Week</div><div class="tab">Month</div><div class="tab">YTD</div></div>
        <button class="btn-outline" type="button">Export</button>
        <button class="btn-accent" type="button">+ New Report</button>
      </div>
    </div>
    <div class="content">
      <div class="kpi-row">
        <div class="kpi-card highlight">
          <div class="kpi-label">Revenue</div>
          <div class="kpi-value accent">$284.9K</div>
          <div class="kpi-delta delta-up">↑ 18.4% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,25 10,18 20,22 30,10 40,14 50,4 60,8" fill="none" stroke="#c8ff00" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Active Users</div>
          <div class="kpi-value">12,430</div>
          <div class="kpi-delta delta-up">↑ 6.1% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,22 10,19 20,16 30,20 40,12 50,9 60,13" fill="none" stroke="#4499ff" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Conversion</div>
          <div class="kpi-value">3.87%</div>
          <div class="kpi-delta delta-down">↓ 0.3% vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,10 10,14 20,11 30,17 40,20 50,18 60,22" fill="none" stroke="#ff4444" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
        <div class="kpi-card">
          <div class="kpi-label">Avg. Session</div>
          <div class="kpi-value">4m 12s</div>
          <div class="kpi-delta delta-up">↑ 22s vs last week</div>
          <div class="kpi-sparkline" aria-hidden="true"><svg width="60" height="30"><polyline points="0,20 10,16 20,18 30,12 40,10 50,13 60,8" fill="none" stroke="#888" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
        </div>
      </div>
      <div class="chart-section">
        <div class="panel">
          <div class="panel-header">
            <div><span class="panel-title">Revenue Breakdown</span><span class="panel-sub"> — weekly</span></div>
            <div class="panel-actions"><button class="btn-outline btn-outline-mini" type="button">MRR</button><button class="btn-outline btn-outline-mini" type="button">ARR</button></div>
          </div>
          <div class="chart-body">
            <div class="chart-y-labels"><span class="y-label">$80K</span><span class="y-label">$60K</span><span class="y-label">$40K</span><span class="y-label">$20K</span><span class="y-label">$0</span></div>
            <div class="chart-canvas">
              <div class="chart-grid-lines"><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div><div class="grid-line"></div></div>
              <div class="bar-group" data-mu-sd-bars></div>
              <div class="x-labels" data-mu-sd-xlabels></div>
            </div>
          </div>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Recent Events</span></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">Stripe payment</div><div class="activity-time">2 min ago · prod</div></div><div class="activity-amount pos">+$2,400</div></div>
          <div class="activity-item"><div class="activity-icon blue">↔</div><div class="activity-text"><div class="activity-name">User upgrade</div><div class="activity-time">14 min ago · api</div></div><div class="activity-amount activity-amount-blue">Pro</div></div>
          <div class="activity-item"><div class="activity-icon red">↓</div><div class="activity-text"><div class="activity-name">Churn event</div><div class="activity-time">41 min ago · prod</div></div><div class="activity-amount neg">−$799</div></div>
          <div class="activity-item"><div class="activity-icon green">↑</div><div class="activity-text"><div class="activity-name">New subscriber</div><div class="activity-time">1h ago · web</div></div><div class="activity-amount pos">+$149</div></div>
          <div class="activity-item"><div class="activity-icon blue">★</div><div class="activity-text"><div class="activity-name">Feature flag live</div><div class="activity-time">2h ago · deploy</div></div><div class="activity-amount activity-amount-dim">v4.2</div></div>
        </div>
      </div>
      <div class="table-section">
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Campaigns</span><div class="panel-actions"><span class="badge">6 active</span></div></div>
          <table><thead><tr><th>Campaign</th><th>Status</th><th>Reach</th><th>CVR</th><th>Progress</th></tr></thead>
          <tbody>
            <tr><td class="td-strong">Spring Drop</td><td><span class="status-pill active">Active</span></td><td>48.2K</td><td class="td-accent">5.4%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="82"></div></div></td></tr>
            <tr><td class="td-strong">Retarget B</td><td><span class="status-pill active">Active</span></td><td>21.7K</td><td>3.1%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="58"></div></div></td></tr>
            <tr><td class="td-strong">Email Drip</td><td><span class="status-pill paused">Paused</span></td><td>9.4K</td><td>1.8%</td><td><div class="progress-bar"><div class="progress-fill" data-progress="31"></div></div></td></tr>
            <tr><td class="td-strong">Paid Search</td><td><span class="status-pill error">Error</span></td><td>—</td><td>—</td><td><div class="progress-bar"><div class="progress-fill" data-progress="0"></div></div></td></tr>
          </tbody></table>
        </div>
        <div class="panel">
          <div class="panel-header"><span class="panel-title">Traffic Sources</span></div>
          <div class="donut-group">
            <div class="donut-row"><div class="donut-label">Organic Search</div><div class="mini-bar"><div class="mini-fill mini-fill-accent" data-w="68"></div></div><div class="donut-val">68%</div></div>
            <div class="donut-row"><div class="donut-label">Paid Social</div><div class="mini-bar"><div class="mini-fill mini-fill-blue" data-w="42"></div></div><div class="donut-val">42%</div></div>
            <div class="donut-row"><div class="donut-label">Direct</div><div class="mini-bar"><div class="mini-fill mini-fill-grey" data-w="24"></div></div><div class="donut-val">24%</div></div>
            <div class="donut-row"><div class="donut-label">Referral</div><div class="mini-bar"><div class="mini-fill mini-fill-mid" data-w="15"></div></div><div class="donut-val">15%</div></div>
            <div class="donut-row"><div class="donut-label">Email</div><div class="mini-bar"><div class="mini-fill mini-fill-dim" data-w="9"></div></div><div class="donut-val">9%</div></div>
            <div class="donut-footer"><span class="donut-foot-label">Total sessions</span><span class="donut-foot-val">198,340</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
/* ─── 01 Axiom SaaS Dashboard — minimalist dark cockpit UI ─────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Syne:wght@400;600;700;800&display=swap');

.mu-sd {
  --mu-sd-bg: #0a0a0a;
  --mu-sd-surface: #111111;
  --mu-sd-border: #1e1e1e;
  --mu-sd-border-mid: #2a2a2a;
  --mu-sd-text-primary: #f0f0f0;
  --mu-sd-text-secondary: #888;
  --mu-sd-text-dim: #444;
  --mu-sd-accent: #c8ff00;
  --mu-sd-accent-dim: rgba(200,255,0,0.08);
  --mu-sd-red: #ff4444;
  --mu-sd-blue: #4499ff;
  --mu-sd-mono: 'DM Mono', monospace;
  --mu-sd-sans: 'Syne', sans-serif;

  position: relative;
  width: 100%;
  min-height: 760px;
  background: var(--mu-sd-bg);
  color: var(--mu-sd-text-primary);
  font-family: var(--mu-sd-sans);
  display: flex;
  overflow: hidden;
  box-sizing: border-box;
}
.mu-sd *,
.mu-sd *::before,
.mu-sd *::after { box-sizing: border-box; margin: 0; padding: 0; }

.mu-sd .sidebar { width: 220px; min-width: 220px; background: var(--mu-sd-surface); border-right: 1px solid var(--mu-sd-border); display: flex; flex-direction: column; padding: 28px 0; }
.mu-sd .logo { padding: 0 24px 32px; font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.mu-sd .logo-mark { width: 28px; height: 28px; background: var(--mu-sd-accent); border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.mu-sd .nav-section { padding: 0 12px; margin-bottom: 8px; }
.mu-sd .nav-section-spaced { margin-top: 16px; }
.mu-sd .nav-label { font-family: var(--mu-sd-mono); font-size: 9px; letter-spacing: 0.2em; color: var(--mu-sd-text-dim); text-transform: uppercase; padding: 0 12px; margin-bottom: 4px; }
.mu-sd .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--mu-sd-text-secondary); transition: all 0.15s; position: relative; }
.mu-sd .nav-item:hover { color: var(--mu-sd-text-primary); background: var(--mu-sd-border); }
.mu-sd .nav-item.active { color: var(--mu-sd-accent); background: var(--mu-sd-accent-dim); }
.mu-sd .nav-item.active::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 18px; background: var(--mu-sd-accent); border-radius: 0 3px 3px 0; }
.mu-sd .nav-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: 0.4; }
.mu-sd .nav-item.active .nav-dot { opacity: 1; }
.mu-sd .badge { margin-left: auto; font-family: var(--mu-sd-mono); font-size: 10px; background: var(--mu-sd-border-mid); padding: 2px 7px; border-radius: 20px; color: var(--mu-sd-text-secondary); }
.mu-sd .badge.live { background: rgba(200,255,0,0.12); color: var(--mu-sd-accent); }
.mu-sd .sidebar-footer { margin-top: auto; padding: 16px 24px; border-top: 1px solid var(--mu-sd-border); }
.mu-sd .user-row { display: flex; align-items: center; gap: 10px; }
.mu-sd .avatar { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg,#c8ff00,#88bb00); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #0a0a0a; }
.mu-sd .user-name { font-size: 12.5px; font-weight: 600; }
.mu-sd .user-role { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .main { flex: 1; overflow-y: auto; display: flex; flex-direction: column; }
.mu-sd .topbar { display: flex; align-items: center; padding: 20px 32px; border-bottom: 1px solid var(--mu-sd-border); gap: 16px; }
.mu-sd .topbar-title { font-size: 14px; font-weight: 600; }
.mu-sd .topbar-sub { font-family: var(--mu-sd-mono); font-size: 11px; color: var(--mu-sd-text-dim); margin-left: 4px; }
.mu-sd .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.mu-sd .tab-group { display: flex; background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 8px; padding: 3px; gap: 2px; }
.mu-sd .tab { font-family: var(--mu-sd-mono); font-size: 11px; padding: 5px 14px; border-radius: 5px; cursor: pointer; color: var(--mu-sd-text-dim); transition: all 0.15s; }
.mu-sd .tab.active { background: var(--mu-sd-border-mid); color: var(--mu-sd-text-primary); }
.mu-sd .btn-outline { font-family: var(--mu-sd-mono); font-size: 11px; padding: 7px 16px; border: 1px solid var(--mu-sd-border-mid); background: transparent; color: var(--mu-sd-text-secondary); border-radius: 8px; cursor: pointer; }
.mu-sd .btn-outline-mini { padding: 4px 10px; font-size: 10px; }
.mu-sd .btn-accent { font-family: var(--mu-sd-mono); font-size: 11px; padding: 7px 16px; border: none; background: var(--mu-sd-accent); color: #0a0a0a; border-radius: 8px; cursor: pointer; font-weight: 500; }
.mu-sd .content { padding: 28px 32px; display: flex; flex-direction: column; gap: 20px; }
.mu-sd .kpi-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.mu-sd .kpi-card { background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 12px; padding: 20px 22px; position: relative; overflow: hidden; }
.mu-sd .kpi-card.highlight { border-color: rgba(200,255,0,0.2); }
.mu-sd .kpi-card.highlight::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--mu-sd-accent); }
.mu-sd .kpi-label { font-family: var(--mu-sd-mono); font-size: 10px; letter-spacing: 0.12em; color: var(--mu-sd-text-dim); text-transform: uppercase; margin-bottom: 10px; }
.mu-sd .kpi-value { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; animation: mu-sd-count 0.5s ease both; }
.mu-sd .kpi-value.accent { color: var(--mu-sd-accent); }
.mu-sd .kpi-delta { font-family: var(--mu-sd-mono); font-size: 11px; }
.mu-sd .delta-up { color: var(--mu-sd-accent); } .mu-sd .delta-down { color: var(--mu-sd-red); }
.mu-sd .kpi-sparkline { position: absolute; right: 16px; bottom: 16px; opacity: 0.3; }
.mu-sd .kpi-card:nth-child(1) .kpi-value { animation-delay: 0.1s; } .mu-sd .kpi-card:nth-child(2) .kpi-value { animation-delay: 0.2s; }
.mu-sd .kpi-card:nth-child(3) .kpi-value { animation-delay: 0.3s; } .mu-sd .kpi-card:nth-child(4) .kpi-value { animation-delay: 0.4s; }
@keyframes mu-sd-count { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.mu-sd .chart-section { display: grid; grid-template-columns: 1fr 340px; gap: 14px; }
.mu-sd .panel { background: var(--mu-sd-surface); border: 1px solid var(--mu-sd-border); border-radius: 12px; overflow: hidden; }
.mu-sd .panel-header { display: flex; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--mu-sd-border); gap: 10px; }
.mu-sd .panel-title { font-size: 13px; font-weight: 600; }
.mu-sd .panel-sub { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .panel-actions { margin-left: auto; display: flex; gap: 8px; }
.mu-sd .chart-body { padding: 20px 22px 16px; position: relative; height: 200px; }
.mu-sd .chart-y-labels { position: absolute; left: 22px; top: 20px; bottom: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.mu-sd .y-label { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .chart-canvas { margin-left: 36px; height: 100%; position: relative; }
.mu-sd .chart-grid-lines { position: absolute; top: 0; bottom: 24px; left: 0; right: 0; display: flex; flex-direction: column; justify-content: space-between; }
.mu-sd .grid-line { width: 100%; height: 1px; background: var(--mu-sd-border); }
.mu-sd .bar-group { position: absolute; bottom: 24px; left: 0; right: 0; height: calc(100% - 24px); display: flex; align-items: flex-end; gap: 8px; padding: 0 4px; }
.mu-sd .bar-wrap { flex: 1; display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.mu-sd .bar { flex: 1; border-radius: 3px 3px 0 0; cursor: pointer; animation: mu-sd-bar 0.6s cubic-bezier(0.23,1,0.32,1) both; }
.mu-sd .bar.primary { background: var(--mu-sd-accent); opacity: 0.9; } .mu-sd .bar.secondary { background: var(--mu-sd-border-mid); }
@keyframes mu-sd-bar { from { transform: scaleY(0); transform-origin: bottom; } to { transform: scaleY(1); transform-origin: bottom; } }
.mu-sd .x-labels { position: absolute; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 0 4px; }
.mu-sd .x-label { flex: 1; font-family: var(--mu-sd-mono); font-size: 9px; color: var(--mu-sd-text-dim); text-align: center; }
.mu-sd .activity-item { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--mu-sd-border); cursor: pointer; }
.mu-sd .activity-item:last-child { border-bottom: none; }
.mu-sd .activity-icon { width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; }
.mu-sd .activity-icon.green { background: rgba(200,255,0,0.1); } .mu-sd .activity-icon.blue { background: rgba(68,153,255,0.1); } .mu-sd .activity-icon.red { background: rgba(255,68,68,0.1); }
.mu-sd .activity-text { flex: 1; min-width: 0; }
.mu-sd .activity-name { font-size: 12.5px; font-weight: 500; }
.mu-sd .activity-time { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); margin-top: 1px; }
.mu-sd .activity-amount { font-family: var(--mu-sd-mono); font-size: 12px; font-weight: 500; }
.mu-sd .activity-amount.pos { color: var(--mu-sd-accent); } .mu-sd .activity-amount.neg { color: var(--mu-sd-red); }
.mu-sd .activity-amount-blue { color: var(--mu-sd-blue); } .mu-sd .activity-amount-dim { color: var(--mu-sd-text-dim); }
.mu-sd .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mu-sd-accent); animation: mu-sd-pulse 2s infinite; }
.mu-sd .live-dot-inline { margin-left: 10px; }
@keyframes mu-sd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
.mu-sd .table-section { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.mu-sd table { width: 100%; border-collapse: collapse; }
.mu-sd th { font-family: var(--mu-sd-mono); font-size: 9px; letter-spacing: 0.15em; color: var(--mu-sd-text-dim); text-transform: uppercase; padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--mu-sd-border); }
.mu-sd td { padding: 11px 14px; font-size: 12.5px; border-bottom: 1px solid var(--mu-sd-border); color: var(--mu-sd-text-secondary); }
.mu-sd tr:last-child td { border-bottom: none; }
.mu-sd .td-strong { color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .td-accent { color: var(--mu-sd-accent); }
.mu-sd .status-pill { font-family: var(--mu-sd-mono); font-size: 9px; padding: 3px 8px; border-radius: 20px; }
.mu-sd .status-pill.active { background: rgba(200,255,0,0.12); color: var(--mu-sd-accent); }
.mu-sd .status-pill.paused { background: rgba(255,255,255,0.06); color: var(--mu-sd-text-dim); }
.mu-sd .status-pill.error { background: rgba(255,68,68,0.1); color: var(--mu-sd-red); }
.mu-sd .progress-bar { width: 80px; height: 4px; background: var(--mu-sd-border-mid); border-radius: 2px; overflow: hidden; }
.mu-sd .progress-fill { height: 100%; background: var(--mu-sd-accent); border-radius: 2px; }
.mu-sd .progress-fill[data-progress="0"] { width: 0%; }
.mu-sd .progress-fill[data-progress="31"] { width: 31%; }
.mu-sd .progress-fill[data-progress="58"] { width: 58%; }
.mu-sd .progress-fill[data-progress="82"] { width: 82%; }
.mu-sd .donut-group { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.mu-sd .donut-row { display: flex; align-items: center; gap: 14px; }
.mu-sd .donut-label { flex: 1; font-size: 12.5px; color: var(--mu-sd-text-secondary); }
.mu-sd .donut-val { font-family: var(--mu-sd-mono); font-size: 12px; color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .mini-bar { flex: 1; height: 3px; background: var(--mu-sd-border-mid); border-radius: 2px; overflow: hidden; margin: 0 8px; }
.mu-sd .mini-fill { height: 100%; border-radius: 2px; }
.mu-sd .mini-fill-accent { background: var(--mu-sd-accent); } .mu-sd .mini-fill-blue { background: var(--mu-sd-blue); }
.mu-sd .mini-fill-grey { background: #888; } .mu-sd .mini-fill-mid { background: #555; } .mu-sd .mini-fill-dim { background: #333; }
.mu-sd .mini-fill[data-w="9"] { width: 9%; } .mu-sd .mini-fill[data-w="15"] { width: 15%; } .mu-sd .mini-fill[data-w="24"] { width: 24%; }
.mu-sd .mini-fill[data-w="42"] { width: 42%; } .mu-sd .mini-fill[data-w="68"] { width: 68%; }
.mu-sd .donut-footer { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mu-sd-border); display: flex; justify-content: space-between; align-items: center; }
.mu-sd .donut-foot-label { font-family: var(--mu-sd-mono); font-size: 10px; color: var(--mu-sd-text-dim); }
.mu-sd .donut-foot-val { font-family: var(--mu-sd-mono); font-size: 14px; color: var(--mu-sd-text-primary); font-weight: 500; }
.mu-sd .main::-webkit-scrollbar { width: 4px; } .mu-sd .main::-webkit-scrollbar-thumb { background: var(--mu-sd-border-mid); border-radius: 2px; }

@media (max-width: 900px) {
  .mu-sd { flex-direction: column; }
  .mu-sd .sidebar { width: 100%; min-width: 0; flex-direction: row; padding: 16px; overflow-x: auto; }
  .mu-sd .nav-section, .mu-sd .sidebar-footer { padding: 0; margin: 0 12px 0 0; border: none; }
  .mu-sd .kpi-row { grid-template-columns: 1fr 1fr; }
  .mu-sd .chart-section, .mu-sd .table-section { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mu-sd .kpi-value, .mu-sd .bar, .mu-sd .live-dot { animation: none !important; }
}
(() => {
  // Scoped chart builder — finds the bars container inside .mu-sd only,
  // so multiple instances can render on one page without colliding on
  // an element id.
  const root = document.querySelector('.mu-sd');
  if (!root) return;
  const bars = root.querySelector('[data-mu-sd-bars]');
  const xlabels = root.querySelector('[data-mu-sd-xlabels]');
  if (!bars || !xlabels || bars.childElementCount > 0) return;
  const data = [
    { label: 'Mon', a: 55, b: 30 },
    { label: 'Tue', a: 70, b: 25 },
    { label: 'Wed', a: 45, b: 40 },
    { label: 'Thu', a: 80, b: 20 },
    { label: 'Fri', a: 65, b: 35 },
    { label: 'Sat', a: 90, b: 15 },
    { label: 'Sun', a: 60, b: 45 },
  ];
  data.forEach((d, i) => {
    const wrap = document.createElement('div');
    wrap.className = 'bar-wrap';
    const b1 = document.createElement('div');
    b1.className = 'bar primary';
    b1.style.height = d.a + '%';
    b1.style.animationDelay = (i * 0.07 + 0.3) + 's';
    const b2 = document.createElement('div');
    b2.className = 'bar secondary';
    b2.style.height = d.b + '%';
    b2.style.animationDelay = (i * 0.07 + 0.4) + 's';
    wrap.append(b1, b2);
    bars.appendChild(wrap);
    const lbl = document.createElement('div');
    lbl.className = 'x-label';
    lbl.textContent = d.label;
    xlabels.appendChild(lbl);
  });
})();

More from 6 CSS Minimalist UI Designs

Vera Lindstrom PortfolioLedger NewsCrest LandingMaison Elara StorefrontElara FinTech
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →