App Shell

The AppShell component composes header, sidebar, aside, main content, and footer regions for application layouts.

Usage & Examples

Dashboard Shell

Operations

Queue health and release activity.

dashboard-shell.tsx

<AppShell
  header={<strong>Operations</strong>}
  sidebar={<nav>Overview<br />Reports<br />Settings</nav>}
  aside={<span>Team online: 8</span>}
  footer={<small>Updated just now</small>}
>
  <p>Queue health and release activity.</p>
</AppShell>

Props API

App Shell props API
				Default	Description
`aside`	`ReactNode`	No	props	`—`	Complementary aside region rendered after the main content.
`asideWidth`	`string`	No	props	`"18rem"`	Width of the aside column.
`children`	`ReactNode`	No	props	`—`	Main page content.
`className`	`string`	No	styling	`—`	Additional class name for the root shell.
`contentClassName`	`string`	No	props	`—`	Additional class name for the main content area.
`data-testid`	`string`	No	testing	`—`	Backward-compatible alias for test ID attributes.
`disabled`	`boolean`	No	props	`false`	Whether the shell is visually disabled.
`footer`	`ReactNode`	No	props	`—`	Footer region rendered below the main content.
`glass`	`boolean`	No	props	`configured default glass setting (fallback: false)`	Whether to render glass styling.
`header`	`ReactNode`	No	props	`—`	Header region rendered at the top of the shell.
`label`	`ReactNode`	No	props	`—`	Legacy alias for header content retained for scaffold compatibility.
`loading`	`boolean`	No	props	`false`	Whether the shell should display a loading state.