LAYOUT

AppShell

Two-column app layout: sticky sidebar (configurable width and tone) + scrollable main area. The shell takes the full viewport height and keeps the sidebar pinned while the main column scrolls.

Import

import { AppShell } from 'damo-ui'

Basic shape

AppShell occupies the full viewport. The example below shows a static visual scaled into a framed preview — wire your own Sidebar (and PageHeader) inside the slots.

Main

Page content scrolls here. The sidebar stays pinned at the top.

1<AppShell sidebar={<Nav />} sidebarWidth={260}>
2  <PageHeader title="Dashboard" />
3  <main>{children}</main>
4</AppShell>

On-dark sidebar

1<AppShell sidebar={<Nav />} sidebarTone="onDark">
2  …
3</AppShell>

Props

AppShell props
PropTypeDefaultDescription
sidebar*ReactNode—Content rendered inside the sticky <aside> column. Pair with a Sidebar / Nav component.
sidebarWidthnumber240Pixel width of the sidebar column.
sidebarTone'default' | 'onDark''default'default paints the sidebar with the card surface; onDark flips it to ink with light text — pair with NavItem tone="onDark".
childrenReactNode—Main content rendered in the right column.

Pairs well with

  • Sidebar — composable side panel with header, body, footer slots.
  • PageHeader — eyebrow + title + actions strip for the top of the main column.
  • AppTopBar — alternative chrome for non-sidebar layouts (also can render inside the main column).
← MedalAppTopBar →