--- title: "App shell" description: "Frames a page or an app. It places a header, the navigation, the main content, an aside and a footer, decides from the window's width how each is shown, and lets a keyboard reach the content in one step." url: "https://tanrei.chnotchy.com/components/app-shell/" last_updated: 2026-10-23T11:50:10.000Z --- # App shell > Frames a page or an app. It places a header, the navigation, the main content, an aside and a footer, decides from the window's width how each is shown, and lets a keyboard reach the content in one step. ## Overview An app shell is the frame of a window. It places regions and draws none of their content: the header is your app bar, the navigation your navigation drawer, the footer your own layout. What the shell adds is what a hand-made frame forgets: the landmarks, one set of window widths, the space a sticky header takes from a link’s target, and a way past the frame for the keyboard. A frame is a whole window, so this page has no live example of it: a shell drawn inside a page would take that page’s window class. The fixtures under [Specs](https://tanrei.chnotchy.com/components/app-shell/#specs) are listed with their props; each is drawn alone in a window of its own in the tests. On the web it is `` around your own regions. The element has no shadow root, so a `
` is the page’s banner and the one `
` its main landmark, read without script and by a crawler. The other platforms have not implemented it yet. ### Usage **Web** ```html Skip to content
menu
…
…
…
 ``` **React** ```tsx import { AppBar, AppShell, Button, NavigationDrawer } from '@tanrei/react'; import '@tanrei/web/app-shell.css'; setWindowClass(event.detail.windowClass)}> Skip to content
…
{children}
…
 ``` `@tanrei/web/app-shell.css` lays the whole frame out before any script runs, so a page rendered on a server does not move when the script arrives, and the skip link works with scripting off. The element adds the same stylesheet to the page by itself. ### What you write A region is a child with a `slot` attribute. The main region is the one `
` without one. | Region | On the web | The shell gives it | | --- | --- | --- | | Skip link | `` | The first stop of the keyboard. It is drawn only while it has keyboard focus. | | Announcement | `
` around a callout | The frame’s whole width above the header. | | Header | `
` around your app bar | The whole width. It stays at the top while the page scrolls. | | Navigation | `` | The start edge, in one of three presentations. | | Main | `
` | Gutters, a width limit, and the skip link’s destination. | | Aside | `