Patterns/Dashboard shell

Dashboard shell

Production pages use a fixed chrome height for the header, a scrollable main, and p-4 md:p-6 on the inner content. Use the docs Dashboard preview surface to see components in a similar frame.

Structure

/* Merchant app: app/(dashboard)/layout.tsx (simplified) */
<div className="flex h-screen overflow-hidden bg-background">
  <aside>{/* Sidebar */}</aside>
  <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
    <header className="h-[57px] shrink-0 border-b border-header-border bg-header">
      {/* Toolbar */}
    </header>
    <main className="min-h-0 flex-1 overflow-y-auto">
      <div className="p-4 md:p-6">{/* Page content — same gutters as production */}</div>
    </main>
  </div>
</div>

Tokens

  • bg-background — page canvas
  • bg-header / border-header-border — top bar
  • bg-sidebar — rail (see product Sidebar)

Docs previews

<!-- In docs previews, choose "Dashboard" surface to approximate this canvas -->