Skip to main content
MACAW

AppShell

Templatebeta@macaw-ds/ui · since 0.1.0

The application frame: skip link, sticky TopBar, full-height SideNav column and the main area. One per app, at the root layout.

Open gallery

Lays out the product chrome with depth by tone: the canvas is the background, the TopBar and SideNav column sit on layer-1. The SideNav column is sticky, exactly the viewport height below the TopBar, and scrolls on its own; the window scrolls the main area. A skip link is the first Tab stop.

Playground

Controls are generated from the manifest; the snippet is what the CLI prints. Show focus and Reduced motion appear only when they apply.

Frame theme

No adjustable props: the content goes in slots.

Perch
Test mode

INV-0041

Overdue

Acme Corporation · Due 14 Oct 2026

Amount due

$12,480.00

Paid

$0.00

Days overdue

12

Line items

Platform fee, October
$9,800.00
Card processing, 4,120 transactions
$1,360.00
Payout acceleration
$400.00
Tax (8%)
$920.00
Examples
import { AppShell, PageHeader, SideNav, TopBar } from '@macaw-ds/ui';

<AppShell
  topBar={<TopBar brand={<Brand />} actions={<Actions />} />}
  sideNav={
    <SideNav aria-label="Main">
      <SideNav.Group title="Billing">
        <SideNav.Item href="/invoices" active>Invoices</SideNav.Item>
      </SideNav.Group>
    </SideNav>
  }
>
  <PageHeader title="Invoices" />
  <div className="layout-grid px-margin py-section">…</div>
</AppShell>

Examples

The named exports of the examples file, rendered as they ship.