App Shell

Name: Boreal UI
Author: Davin Chiupka

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.
`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.
`mainClassName`	`string`	No	props	`—`	Additional class name for the main content region.