All components
App Shell
The top-level application frame composing a navbar, sidebar, and main content area.
Acme
Install
zsh — app-shell
1bunx stylexblocks add app-shellUsage — Base UI
app-shell.tsx
1234567891011121314151617import { AppShell, appShellFullscreen } from "#components/ui/base-ui/app-shell.tsx";import { Navbar } from "#components/ui/base-ui/navbar.tsx";import { Sidebar } from "#components/ui/base-ui/sidebar.tsx";
export function Example() { return ( // Root stacks the navbar over Content, which lays the sidebar next to // Main; pin it to the viewport with style={appShellFullscreen} <AppShell.Root> <Navbar.Root>{/* navbar */}</Navbar.Root> <AppShell.Content> <Sidebar.Root>{/* sidebar */}</Sidebar.Root> <AppShell.Main>{/* page */}</AppShell.Main> </AppShell.Content> </AppShell.Root> );}