PageShell

Use cases

• The outermost layout for every page in the Next.js consumer app.
• Wires TopBar, MainSidebar, TitleBar, and a scrollable content region into the main application shell.

When NOT to use

• For a focused empty-state page (login, onboarding wizard) → render directly inside the app without the shell.
• For a modal-only experience → just use a dialog component over the shell.

Platform support

Web: three-region scaffold with desktop sidebar column, mobile bottom-menu anchor, sticky title bar, internal scroll. Native: vertical stack — topBar at top, titleBar inline, children in a ScrollView. The sidebar prop is accepted but ignored (mobile apps should use a drawer managed by the host app).

Layout

┌────────────────────────────────────────┐
│            TopBar                       │ ← topBar prop
├─────┬──────────────────────────────────┤
│Main │  TitleBar                         │ ← titleBar prop
│Side │  (sticky)                         │
│bar  │ ─────────────────────────────────│
│     │                                   │
│     │  children                         │
│     │  (scrolls inside this region)     │
└─────┴──────────────────────────────────┘
  ↑
  sidebar prop

Layout rules

• Outer wrapper is h-screen flex flex-col overflow-hidden — the entire viewport is the shell.
• The main column scrolls internally so the TopBar and TitleBar stay fixed.
• Content gets responsive breathable padding (p-4 pb-24 md:p-6 lg:px-12 lg:py-8) — don't add another page-level padding wrapper inside.
• The shell body is relative; this anchors MainSidebar's mobile bottom menu and drilldown panel inside the shell instead of the viewport.

Composition

The shell handles layout only. Pass any compatible children:

Related

• TopBar — global app-chrome header.
• Main Sidebar — compact rail with expandable drilldown panel.
• Sidebar — full collapsible sidebar with text labels.
• TitleBar — page-level heading with icon and supertitle.