AppShell defines how EnterUI handles a minimal responsive shell for header, sidebar, and main content, including default structure, accessible states, and token-driven styling.

#Default usage

<AppShell>
  <AppShellHeader><Header><HeaderBrand>Console</HeaderBrand></Header></AppShellHeader>
  <AppShellSidebar>
    <Sidebar>
      <SidebarSection>
        <SidebarSectionTitle>Workspace</SidebarSectionTitle>
        <SidebarNav><SidebarItem href="#" active>Overview</SidebarItem></SidebarNav>
      </SidebarSection>
    </Sidebar>
  </AppShellSidebar>
  <AppShellMain>
    <Card><CardHeader><CardTitle>Workspace overview</CardTitle></CardHeader><CardContent>Use AppShell as a layout primitive, not a full app framework.</CardContent></Card>
  </AppShellMain>
</AppShell>

#Import

import {
  AppShell,
  AppShellHeader,
  AppShellMain,
  AppShellSidebar,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Header,
  HeaderBrand,
  Sidebar,
  SidebarItem,
  SidebarNav,
  SidebarSection,
  SidebarSectionTitle,
} from "@froggdesign/enter-ui-react";

#Patterns

#Workspace defaults and ownership

Workspace uses document scrolling, not separate main/sidebar scroll containers. Its header slot is sticky; compose Header inside it for visual chrome. The backdrop spans the viewport with a subtle neutral fade. The canvas is 1520px including 24px horizontal gutters, with a 248px sidebar and 24px gap. The sidebar stays vertical and sticky through tablet widths, narrowing to 216px below 1280px. Below 900px it becomes a compact, scrollable tab row with an underline for the active page instead of a full-width sidebar card. Gutters reduce to 16px, then 12px at 480px. No drawer opens automatically.

The default variant has a 280px sidebar, hidden at 760px, and does not opt into workspace sticky behavior. The documentation variant is a reading-shell preset, not an automatic docs site, sidebar tree, router, or table of contents.

Use VStack with align="stretch" inside AppShellMain so grids and tables fill the available width. See the complete no-override dashboard and its source at apps/web/app/enter-ui/examples/internal-dashboard/page.tsx.

#Accessibility

AppShellMain renders a main landmark. Avoid nesting multiple main landmarks in a real page.

#API

• AppShell: sidebar="left" or sidebar="none", variant="default" | "workspace" | "documentation", and optional sidebarWidth.
• Slot components map to header, sidebar, and main grid regions.
• Workspace responsive CSS keeps the sidebar vertical until 900px, then presents a compact horizontal navigation row; the default variant hides its sidebar under 760px.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.