# AppShell - **Category:** Layout (`layout`) - **Slug:** `layout/app-shell` - **Status:** stable - **Platforms:** web - **Import:** `import { AppShell } from "@protocore/pds";` - **Docs:** https://pds.protocore.io/components/layout/app-shell > The application frame — an optional env strip and top bar over a sidebar + main body row, with an optional footer and a responsive mobile drawer. ## When to use it `AppShell` is the outermost frame for an **application** — a console or dashboard with persistent chrome. It owns the hard parts: the sticky env/top-bar stack, the sidebar-plus-main grid, and the responsive collapse to a drawer. Use it once, at the root of an app; compose the slots from the layout primitives (`TopBar`, `Sidebar`, `Footer`, `EnvStrip` — pass `env` and it renders the strip for you). It is not for marketing pages, which want a plain `TopBar` + `Section`s + `Footer` and no fixed rail. Keep sidebar open-state controlled at the app root so a menu button in the top bar and the backdrop stay in sync. ## Props | Prop | Type | Required | Default | Description | | --- | --- | --- | --- | --- | | `children` | `ReactNode` | no | — | Main content region. | | `className` | `string` | no | — | — | | `defaultSidebarOpen` | `boolean` | no | `false` | Uncontrolled initial mobile sidebar open state. Default false. | | `env` | `enum` | no | — | When set, renders a sticky environment strip above the top bar. | | `envLabel` | `ReactNode` | no | — | Override the environment strip label. | | `envMessage` | `ReactNode` | no | — | Wayfinding message for the environment strip (grows it into its loud form). | | `footer` | `ReactNode` | no | — | The footer slot (e.g. a `