App Shell = layout root only

Pass your existing Sidebar, SideRail, or Navbar as chrome. Page UI ( PageHeader, Subnav, tables) goes in children inside <main>. Previews use a 90% preview width × 90vh per variant so proportions match a real dashboard.

atelier — typical shell for this theme

variant=sidebar — Lyriq-style dashboard column.

Dashboard

children render in main — chrome stays fixed.

Route content — tables, forms, charts.

variant=sidebar — full Sidebar (Lyriq dashboard)

Songs

Sidebar + groups + footer CTA — persistent left column.

Route content — tables, forms, charts.

variant=sidebar — SideRail + CommandBar (Lggr-style)

API logs

PageHeader top inset + CommandBar below — rail keeps py-4 vertical padding.

Dense tools: rail stays narrow; main holds filters and data.

variant=sidebar — settings with Subnav

Settings

Subnav tabs live inside main, under PageHeader.

variant=navbar — Scrawl top shell

Notebooks

Blurred navbar spans full width; content stacks below.

Route content — tables, forms, charts.

variant=navbar — Real Platform floating toolbar

Contacts, Filter, and New contact live in the floating Navbar — not repeated in main.

Page body on canvas — tables, filters, and empty states belong here.

Minimal main (header only)

Empty states and simple pages can skip PageHeader.

Related components

App Shell does not replace Sidebar, Navbar, Side Rail, or Page Header— it is the outer flex min-h-screen wrapper you drop in a root layout once.

API

Prop	Required	Type	Default	Description
theme	Optional	SiteTheme	atelier	Theme tokens on the outer wrapper.
variant	Optional	"sidebar" \| "navbar"	sidebar	sidebar = nav left + main right. navbar = nav top + main below.
chrome	Optional	ReactNode	—	Your Sidebar or Navbar component — the persistent app chrome.
children	Optional	ReactNode	—	Page content rendered inside <main> — PageHeader, tables, forms, etc.