AppShell
Application layout frame: a fixed left sidebar on ≥lg, a sticky top bar, and a scrollable main region. On mobile the sidebar collapses behind a menu button and slides in as an overlay drawer. Client Component. Theme-driven.
Dashboard
Installation
pnpm dlx @hex-core/cli add app-shellAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
sidebarrequired | ReactNode | — | Sidebar content — typically an <AppSidebarNav>. Fixed on ≥lg, a drawer on mobile. |
header | ReactNode | — | Top-bar content (breadcrumbs, search, account menu) shown right of the mobile menu button. |
childrenrequired | ReactNode | — | Main page content. |
className | string | — | Additional classes applied to the root wrapper. |
AI Guidance
When to use
Use as the outer frame of an authenticated app: dashboards, settings, data views. Put an AppSidebarNav in the sidebar slot and page content in children.
When not to use
Don't use for marketing pages (use marketing-header + sections). Don't nest an AppShell inside another. Don't put the page <h1> in the shell — put it in the page content or header slot once.
Common mistakes
- Rendering the whole page as a Client Component because AppShell is one — keep page content in Server Components and pass it as children.
- Duplicating navigation in both the sidebar and the header — the sidebar is the primary nav.
- Forgetting to give the sidebar a scroll region when the nav is long — AppSidebarNav handles this; raw content may overflow.
Accessibility
The mobile menu button is a <button> with aria-expanded and an aria-label. The drawer backdrop is a labelled button so it's keyboard-dismissable. The sticky top bar stays above content via z-index without trapping focus.
Related components
Token budget: 750
Verified against @hex-core/components@1.12.0