The frame.

Layout & Shell is the application chrome that wraps every screen. It owns the page-level landmark regions — banner, navigation, complementary, and main — mounts the single skip-link and toaster, and handles the responsive sidebar collapse, so each individual page is free to stay focused on its content.

The four landmarks the shell owns

How to read this chapter

Shell vs. content

The shell defines where content sits; Components define what sits inside. Compose a shell here, then fill it with primitives and recipes from the other chapters.

Landmarks once, not twice

AppShell already renders all four landmarks, so a nested TopBar or Sidebar reads the landmark context and downgrades — asLandmark="auto" means no double-banner, no double-nav.

8.5 × 11 · Portrait