AppShell

The sidebar and topbar chrome the apps run inside: grouped nav, collapse, active treatment, and the standalone rail and topbar exports.

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 lg breakpoint) to switch to icon-only mode, and the group carets on Modules/Settings to collapse/expand.

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