A minimal responsive shell for header, sidebar, and main content.
AppShell defines how EnterUI handles a minimal responsive shell for header, sidebar, and main content, including default structure, accessible states, and token-driven styling.
Use AppShell as structure, then compose Header and Sidebar inside it.
<AppShell style={{ minHeight: 300 }}>
<AppShellHeader><Header><HeaderBrand>Console</HeaderBrand></Header></AppShellHeader>
<AppShellSidebar>
<Sidebar>
<SidebarSection>
<SidebarSectionTitle>Workspace</SidebarSectionTitle>
<SidebarNav><SidebarItem href="#" active>Overview</SidebarItem></SidebarNav>
</SidebarSection>
</Sidebar>
</AppShellSidebar>
<AppShellMain style={{ padding: 20 }}>
<Card><CardHeader><CardTitle>Workspace overview</CardTitle></CardHeader><CardContent>Use AppShell as a layout primitive, not a full app framework.</CardContent></Card>
</AppShellMain>
</AppShell>import {
AppShell,
AppShellHeader,
AppShellMain,
AppShellSidebar,
Card,
CardContent,
CardHeader,
CardTitle,
Header,
HeaderBrand,
Sidebar,
SidebarItem,
SidebarNav,
SidebarSection,
SidebarSectionTitle,
} from "@froggdesign/enter-ui-react";Use sidebar none for focused pages or detail views.
The shell can collapse to a header and content layout.
Use variant workspace for dense product apps with a persistent sidebar and independently scrolling main region.
Main content scrolls independently in workspace mode.
AppShellMain renders a main landmark. Avoid nesting multiple main landmarks in a real page.
AppShell: sidebar="left" or sidebar="none", variant="default" or variant="workspace", and optional sidebarWidth.Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.