AppShell

Whole-app chrome: nav sidebar, topbar slots, and the padded page frame.

The shell, seven ways

Every shape the two apps and the demo ship, picked with one tab strip

Open full layout in a new tab

Dashboard

Aakarsh Chopra

Modules

Content stacks as plain children: the shell only owns the chrome

Data Extraction

Validation

Enhancement

Image Generation

Active treatment

One rule: the current nav item gets a soft primary pill, no second gray-pill/teal-text variant

Click a sidebar item to see the active state move; use the rail-collapse button above the nav (visible at the lgbreakpoint) to switch to icon-only mode, and the group carets on Modules/Settings to collapse/expand. Drag the rail's right edge (also lgand up) to resize it between 200 and 400px; dragging under 120px collapses it to the rail instead, and the width persists across visits.

Sidebar, standalone

The rail is its own export; the patterns section anatomizes it at /patterns/sidebar-anatomy

<Sidebar nav={nav} collapsed={collapsed} onToggleCollapsed={toggle} renderLink={RouterLink} footer={identity} />

Topbar, standalone

The top chrome row: title, center search slot, actions, user

Jobs

actions slot

Slot map

The styling override points this component exposes

className · sidebarClassName · topbarClassName · contentClassName

Interactive shell

logo: Plain wordmark, no rail icon
nav: 4 groups: Home, Modules (collapsible), Data, Settings (collapsible)
topbar.title / search / actions / user: "Dashboard", a search pill, a notification icon, a name label
footer: A copyright bar under the content area
children: Module cards and a slot-map card fill the content area

Styling slots

Every className the component exposes, and what it reaches

className: the shell root
sidebarClassName: the sidebar rail
topbarClassName: the topbar
contentClassName: the main content area