App Shell
The nx application shell: fixed sidebar, main content card, page chrome and the optional scope top bar.
bunx shadcn@latest add @nx-ui/app-shellThis gallery is the demo
The page you're reading runs inside AppShell — the coloured gutter, the sidebar on the left and this rounded content card are all it. The scenes below are the same block scaled down into a frame.
Look past this canvas: the sidebar, the org switcher and the page you're scrolling are a live AppShell instance from app/(showcase)/layout.tsx.
Anatomy — live
Compose it with a sidebar slot and page content. The gutter colour comes from the inset-variant sidebar; the content mounts inside a rounded, ringed page card that is itself the scroll container. This is the real block at full size, rendered live — open it in its own window to feel the collapse and scroll behaviour.
/view/block-app-shellOpen full screenTop bar — the scope switcher above the page card
Give AppShell a `topBar` and the nx header strip renders on the gutter, above the rounded card: ScopeBreadcrumbs (org ▸ project context switcher) on the left, actions on the right — a tooltip'd help button by default. Existing usages without `topBar` are untouched. The full composition, with the sliding scoped nav, is the scoped-app example (/view/scoped-app).
Header patterns
The page card holds any chrome. Here a header row carries a search field and actions above a scrolling list — the card scrolls independently of the gutter.
Empty state
A realistic composition: the shell with a first-run empty state in the page card. The gutter and sidebar frame the canvas while an operations team is prompted to log their first movement.
API reference
Exported parts and their props, extracted from the component source.