Component
AppShell
AppShell provides placement regions for mobile application chrome and a separately scrolling body. Put visual components such as NavigationBar and TabBar inside its header and footer regions.
Preview
Installation
pnpm dlx shadcn@latest add https://pwaui.com/r/app-shell.jsonUsage
import { Home } from "lucide-react"import { AppShell } from "@/components/ui/app-shell"import { NavigationBar } from "@/components/ui/navigation-bar"import { TabBar } from "@/components/ui/tab-bar"
export function Screen() { return ( <AppShell> <AppShell.Header> <NavigationBar> <NavigationBar.Title>Today</NavigationBar.Title> </NavigationBar> </AppShell.Header> <AppShell.Main>Scrollable content</AppShell.Main> <AppShell.Footer> <TabBar> <TabBar.Item icon={<Home />} label="Home" active /> </TabBar> </AppShell.Footer> </AppShell> )}Anatomy
AppShellAppShell.HeaderAppShell.MainAppShell.FooterBehavior notes
- Header and Footer are placement regions, not styled navigation components.
- The usual composition is NavigationBar inside Header and TabBar inside Footer.
- Header and Footer apply the relevant safe-area inset; do not wrap their children in another SafeArea for the same edge.
- Main owns scrolling and overscroll containment.
Accessibility
Uses semantic header, main, and footer elements. Provide accessible navigation landmarks inside the chrome regions.