App shell

A React component in Beamline's Dashboard category.

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

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 · Connect your agent