App Shell

Glass scene + chrome slots + content region. Header-only is full-width by default; pass contentWidth (e.g. max-w-6xl) to center header and main as one column. Sidebar mode: desktop column + mobile fullscreen nav (AppShellMenuButton).

Header + contentWidth column

Signpost

Internal

Content region

One column box: chrome and content share edges. Navbar chromePad is header-only; pages do not re-apply max-w/px gutters.

<AppShell contentWidth="max-w-6xl" header={<MyHeader />}>
  <PageContent />
</AppShell>

With sidebar

HomeSearch…

Work area

Sidebar chrome reads denser than the header — larger glass is more opaque.

<AppShell
  sidebar={<MyNav />}
  header={
    <div className="flex h-14 items-center justify-between px-4 lg:hidden">
      <Brand />
      <AppShellMenuButton />
    </div>
  }
  headerClassName="lg:hidden"
>
  <PageContent />
</AppShell>

Mobile fullscreen nav

Below lg, the sidebar column is hidden. Put AppShellMenuButton in the header (or control navOpen yourself). Open state is a fullscreen glass layer on the scene — same sidebar tree, not a skinny drawer. Escape and the overlay close control dismiss it; call useAppShellNav()?.setOpen(false) on link navigate. This catalog app is the live demo: narrow the viewport and open the menu.

Layer rules

Never stack glass on glass — nested surfaces use content materials.
Do not frost cards or table rows; only chrome and overlays blur.
prefers-reduced-transparency swaps every glass surface for its solid fallback automatically.