Skip to main content
Home

Welcome back

This page is a real example of the AppShell layout wrapping ordinary content. The sidebar toggles between fully visible and fully hidden on desktop, and slides in as an off-canvas drawer below 768px.

What you can do

  • Press Cmd/Ctrl + B to toggle the sidebar.
  • Resize the browser to below 768px to switch to the mobile drawer.
  • Reload — the collapse state persists via localStorage.

Composition

The shell is built from seven components: AppShell,AppShellSidebar with three regions (Header, Body, Footer),AppShellHeader, and AppShellMain.

Next

See the AppShell docs for the full prop and token reference, accessibility notes, and the no-flash hydration pattern.