Blocks / App Shell

App Shell beta

The frame most apps live in: a sidebar that stays, a topbar that orients, content that changes.

Preview

Revenue

$48,210

↑ 12.4%

Projects

↑ 4 this month

Team

2 pending invites

Website redesign

Updated the pricing page · 2h ago

Live

Mobile app

New build waiting for review · 5h ago

In review

Brand refresh

Draft shared with the team · 1d ago

Draft

Built from: Avatar, Badge, Breadcrumbs, Button, Separator, Stat — include their CSS alongside this block.

<div class="shell">
  <aside class="shell-side">
    <div class="shell-brand"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="4" width="16" height="16" rx="4"/><rect x="10" y="10" width="4" height="4" rx="1.2"/></svg> Acme Studio</div>
    <nav class="shell-nav">
      <a class="shell-item on"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M3.5 9.5h17M9.5 9.5v10"/></svg> Overview</a>
      <a class="shell-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z"/><path d="M14 3v5h5"/></svg> Projects</a>
      <a class="shell-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg> Inbox<span class="badge dark">3</span></a>
      <a class="shell-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8.5" r="3.4"/><path d="M2.8 20c.7-3.4 3.2-5.2 6.2-5.2s5.5 1.8 6.2 5.2"/><path d="M16 5.4a3.4 3.4 0 0 1 0 6.4M18.5 15.4c1.5.8 2.5 2.4 2.9 4.6"/></svg> Team</a>
      <a class="shell-item"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h10M17 6h4M3 12h4M11 12h10M3 18h12M19 18h2"/><circle cx="15" cy="6" r="2"/><circle cx="9" cy="12" r="2"/><circle cx="17" cy="18" r="2"/></svg> Settings</a>
    </nav>
    <div class="shell-user">
      <span class="k-avatar" data-size="sm">AK</span>
      <div><div class="shell-uname">Aoi Kimura</div><div class="shell-urole">Admin</div></div>
    </div>
  </aside>
  <div class="shell-main">
    <div class="shell-top">
      <nav aria-label="Breadcrumb"><ol class="k-crumbs">
        <li><a href="#">Home</a><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="m9 6 6 6-6 6"/></svg></li>
        <li><span aria-current="page">Overview</span></li>
      </ol></nav>
      <button class="btn btn-pri btn-sm">New project</button>
    </div>
    <hr class="k-sep">
    <div class="shell-stats">
      <div class="k-stat"><div class="k-stat-lbl">Revenue</div><div class="k-stat-val">$48,210</div><span class="k-stat-delta">↑ 12.4%</span></div>
      <div class="k-stat"><div class="k-stat-lbl">Projects</div><div class="k-stat-val">26</div><span class="k-stat-delta">↑ 4 this month</span></div>
      <div class="k-stat"><div class="k-stat-lbl">Team</div><div class="k-stat-val">8</div><span class="k-stat-delta">2 pending invites</span></div>
    </div>
    <hr class="k-sep">
    <div class="shell-row">
      <span class="k-avatar">JM</span>
      <div class="shell-rmain"><div class="shell-rt">Website redesign</div><div class="shell-rs">Updated the pricing page · 2h ago</div></div>
      <span class="badge teal"><i></i>Live</span>
    </div>
    <hr class="k-sep">
    <div class="shell-row">
      <span class="k-avatar">RS</span>
      <div class="shell-rmain"><div class="shell-rt">Mobile app</div><div class="shell-rs">New build waiting for review · 5h ago</div></div>
      <span class="badge amber"><i></i>In review</span>
    </div>
    <hr class="k-sep">
    <div class="shell-row">
      <span class="k-avatar">AK</span>
      <div class="shell-rmain"><div class="shell-rt">Brand refresh</div><div class="shell-rs">Draft shared with the team · 1d ago</div></div>
      <span class="badge "><i></i>Draft</span>
    </div>
  </div>
</div>

.shell{display:grid;grid-template-columns:216px 1fr;border:1px solid var(--k-line);border-radius:14px;overflow:hidden;background:var(--k-bg);font-family:var(--k-font);color:var(--k-ink);text-align:left;width:100%}
.shell-side{border-right:1px solid var(--k-line);background:var(--k-bg-soft);padding:16px 12px;display:flex;flex-direction:column}
.shell-brand{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;padding:2px 8px 14px}
.shell-nav{display:grid;gap:2px}
.shell-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--k-ink-2);text-decoration:none;cursor:pointer}
.shell-item:hover{background:var(--k-bg)}
.shell-item.on{background:var(--k-bg);color:var(--k-ink);font-weight:550;border:1px solid var(--k-line)}
.shell-item.on svg{color:var(--k-core)}
.shell-item .badge{margin-left:auto}
.shell-user{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 8px 2px;border-top:1px solid var(--k-line)}
.shell-uname{font-size:13px;font-weight:550;line-height:1.3}
.shell-urole{font-size:11.5px;color:var(--k-ink-3)}
.shell-main{padding:18px 20px;min-width:0}
.shell-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.shell-main .k-sep{margin:14px 0}
.shell-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:720px){.shell{grid-template-columns:1fr}.shell-side{display:none}.shell-stats{grid-template-columns:1fr}}
.shell-row{display:flex;align-items:center;gap:12px;padding:11px 0}
.shell-rmain{flex:1;min-width:0}
.shell-rt{font-size:13.5px;font-weight:550}
.shell-rs{font-size:12.5px;color:var(--k-ink-2)}

Usage

Nav items are plain links; the active one carries the core-colored icon. Below 720px the sidebar steps aside — replace that with your own drawer pattern when it matters.

CTA Band