App Shell

Usage

import {
  AppShell,
  AppShellSidebar,
  AppShellBody,
  AppShellHeader,
  AppShellMain,
  AppShellFooter,
} from '@acronis-platform/ui-react';

AppShell is the full-page application scaffold — a slot-based layout: a sidebar column beside a body column of a sticky header over the scrolling main content. Drop SidebarPrimary (and optionally SidebarSecondary) into the sidebar slot, SearchGlobal into the header, and your page into main. The scaffold only paints surfaces + a header/footer divider; the slotted components bring their own styling.

Mapped to the App Shell Figma.

Examples

<AppShell>
  <AppShellSidebar>
    <SidebarPrimary … />
  </AppShellSidebar>
  <AppShellBody>
    <AppShellHeader>
      <SearchGlobal … />
    </AppShellHeader>
    <AppShellMain>{children}</AppShellMain>
  </AppShellBody>
</AppShell>

For the full slot assembly with the real nav + search components, see the App Shell pattern.

Parts

All parts accept their native element attributes plus className (use it to size the sidebar, pad main, etc.).