Index › Layout & Shell › App Shell
4 regions · 4 landmarks
The whole frame.
One component assembles the application: a top bar, a navigation rail, a page header, and the content well — each a real WCAG landmark, wired with the skip-link and responsive collapse so every screen inherits the same bones.
Today at the clinic
Tuesday · 9 booked, 2 on hold across 3 treatment rooms.
AppShell owns the page-level landmarks and the responsive grid: [sidebar] [main] columns, [topbar] [content] rows. It mounts a single skip-to-main link, one <main id="main-content">, and persists the sidebar collapse per breakpoint. Slots: topbarSlot · sidebarSlot · children · fabSlot.
Reach for AppShell for any full application screen — it owns the four landmarks, the skip-link, the toaster mount, the ⌘K / [ hotkeys, and the responsive sidebar collapse, so individual pages stay focused on their content. Marketing and auth pages use the public variant (no rail); a focus board uses focus (frozen collapsed rail).
