# App shell

A React component in [Beamline](https://beamline.io/)'s [Dashboard](https://beamline.io/components/dashboard) category. Live demo: https://beamline.io/components/app-shell

The frame for every app screen: collapsible sidebar with grouped navigation, top bar and page.

## Use it for

- The root layout of a SaaS app, dashboard or terminal.

## Not for

- Marketing pages.
- Custom sidebars → compose sidebar parts directly.

## Anatomy

- sidebar (brand, nav groups with badges, footer, rail)
- top bar (toggle, title, actions)
- main (the page main landmark; a div when contained)

## Variants

- **collapsible**: icon, offcanvas
- **contained**: viewport, parent box
- **sidebarTone**: default, brand, contrast

## States

- expanded
- collapsed
- mobile sheet (<768px)

## Keyboard

- ⌘B / Ctrl+B toggles the sidebar
- Nav items are links or buttons; the active one has aria-current=page

## Motion

Sidebar width animates on the 180ms curve.

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `nav` (required) | `{ label?, items: { label, icon?, href?, onSelect?, active?, badge? }[] }[]` | — |  |
| `brand / footer / title / actions` | `ReactNode` | — |  |
| `collapsible` | `'icon'\|'offcanvas'` | — |  |
| `open / defaultOpen / onOpenChange` | `boolean` | — |  |
| `contained` | `boolean` | — |  |
| `mainAs` | `"main" \| "div"` | — | The page area element: main (the page main landmark) unless contained, then div, for a page that has its own main. |
| `style / ref` | `CSSProperties / native Ref` | — |  |
| `classNames` | `AppShellClassNames` | — |  |
| `sidebarTone` | `"default" \| "brand" \| "contrast"` | `"default"` | The sidebar's tone: the look's chrome, the brand, or near-black (Sidebar tone). |

## Built from

- sidebar

## Dependencies

`@radix-ui/react-slot`

## Import

```tsx
import { AppShell } from "@/components/app-shell/app-shell";
```

## Get it

App shell is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. [Get Beamline](https://beamline.io/checkout?pack=complete) · [Connect your agent](https://beamline.io/connect)

## More in Dashboard

- [Bar list](https://beamline.io/components/bar-list): Ranked horizontal bars with label inside and value at the end — top pages, sources, customers.
- [Category bar](https://beamline.io/components/category-bar): One bar split into labelled ranges with an optional marker that names its range.
- [Insight cards](https://beamline.io/components/insight-cards): Findings from an agent, one per page: the sentence, the series it is about with their change, a chart to scrub that names each point, and a follow-up…
- [Metric card](https://beamline.io/components/metric-card): A KPI: label, a value that rolls to each new number, the change with arrow, sign and tone, a trend line and context; unmeasured values are hatched, never…
- [Tracker](https://beamline.io/components/tracker): A row of status blocks for uptime, job runs or daily checks, with tooltips and a legend.