App Layout
Standardized application shell with responsive sidebar, header, and content area.
Quickstart
- Ensure the registry is set up in Installation.
- Run the registry command:
npx shadcn@latest add https://gen-ui-eta-two.vercel.app/r/app-layoutOverview
App Layout is a compound-component system that gives you a production-ready shell. It handles sidebar collapse, mobile sheet behavior, and consistent spacing across pages.
Basic Usage
import { AppLayout } from "@/components/systems/app-layout/app-layout"
<AppLayout>
<AppLayout.Header>
<Logo />
<UserMenu />
</AppLayout.Header>
<AppLayout.Sidebar
header={<SidebarHeader />}
footer={<SidebarFooter />}
>
<Navigation />
</AppLayout.Sidebar>
<AppLayout.Main padding="lg" maxWidth="xl" centered>
<Dashboard />
</AppLayout.Main>
</AppLayout>Controlling Sidebar State
Use controlled state when you want to manage sidebar behavior externally.
const [sidebarState, setSidebarState] = useState("expanded")
<AppLayout
sidebarState={sidebarState}
onSidebarStateChange={setSidebarState}
sidebarPosition="left"
collapseBreakpoint="lg"
>
...
</AppLayout>Mobile Behavior
When the viewport is below collapseBreakpoint, the sidebar becomes a sheet. The header automatically renders a menu toggle button.
API Reference
| Prop | Type | Notes |
|---|---|---|
| sidebarPosition | "left" | "right" | Sidebar placement |
| defaultSidebarState | "expanded" | "collapsed" | "hidden" | Initial sidebar state |
| sidebarState | SidebarState | Controlled state |
| onSidebarStateChange | (state) => void | Change handler |
| headerVariant | "default" | "sticky" | "fixed" | Header behavior |
| AppLayout.Main.padding | "none" | "sm" | "md" | "lg" | "xl" | Content padding |
| AppLayout.Main.maxWidth | "sm" | "md" | "lg" | "xl" | "2xl" | "full" | "none" | Content width |