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>

Visual variants

Themes

primary

Operations

Queue health and release activity.

secondary

Operations

Queue health and release activity.

tertiary

Operations

Queue health and release activity.

quaternary

Operations

Queue health and release activity.

States

success

Operations

Queue health and release activity.

warning

Operations

Queue health and release activity.

error

Operations

Queue health and release activity.

info

Operations

Queue health and release activity.

Variants

solid

Operations

Queue health and release activity.

outline

Operations

Queue health and release activity.

glass

Operations

Queue health and release activity.

Rounding

none

Operations

Queue health and release activity.

medium

Operations

Queue health and release activity.

large

Operations

Queue health and release activity.

Shadows

none

Operations

Queue health and release activity.

light

Operations

Queue health and release activity.

strong

Operations

Queue health and release activity.

visual-variants.tsx

// Themes
<AppShell theme="primary"
    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>
<AppShell theme="secondary"
    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>
<AppShell theme="tertiary"
    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>
<AppShell theme="quaternary"
    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>

// States
<AppShell state="success"
    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>
<AppShell state="warning"
    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>
<AppShell state="error"
    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>
<AppShell state="info"
    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>

// Variants
<AppShell variant="solid"
    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>
<AppShell variant="outline"
    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>
<AppShell variant="glass"
    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>

// Rounding
<AppShell rounding="none"
    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>
<AppShell rounding="medium"
    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>
<AppShell rounding="large"
    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>

// Shadows
<AppShell shadow="none"
    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>
<AppShell shadow="light"
    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>
<AppShell shadow="strong"
    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>

Interaction states

Disabled

Operations

Queue health and release activity.

Operations

Queue health and release activity.

interaction-states.tsx

// Disabled
<AppShell disabled
    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>
// Loading
<AppShell loading
    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.