Build Mobile-First React Apps
A composable layout system with scroll-aware headers, tab bars, sidebars, and safe area handling. Built for React, styled with Tailwind.
Welcome back
Dashboard
Projects
Tasks
Everything you need for mobile layouts
AppShell handles the tricky parts of mobile UI: scroll behavior, safe areas, and component coordination, so you can focus on building features.
Mobile-First
Built for touch interfaces with safe area support and responsive layouts.
Composable
Mix and match components to create any layout pattern you need.
Zero Config
Works out of the box with sensible defaults and optional animations.
TypeScript
Full type safety with comprehensive TypeScript definitions.
Themeable
Uses CSS custom properties, compatible with shadcn/ui themes.
Animated
Optional Framer Motion adapter for smooth, spring-based animations.
Simple, declarative API
Build complex mobile layouts with just a few components. AppShell handles the coordination between header, content, and footer automatically.
- Scroll-aware headers with 6 behavior modes
- Tab bars, floating buttons, and mini bars
- Slide-out sidebars with backdrop
- Automatic safe area handling
1<kw>import</kw> { AppShell, Header, Content, Footer, FooterItem } <kw>from</kw> <str>"appshell-react"</str>;2<kw>import</kw> { Home, Search, Bell, User } <kw>from</kw> <str>"lucide-react"</str>;34<kw>export</kw> <kw>default</kw> <kw>function</kw> App() {5 <kw>return</kw> (6 <AppShell safeArea>7 <Header 8 behavior=<str>"reveal-all"</str> 9 logo={<Logo />}10 title=<str>"Dashboard"</str>11 />12 <Content className=<str>"p-4"</str>>13 {/* Your content */}14 </Content>15 <Footer variant=<str>"tab-bar"</str>>16 <FooterItem icon={<Home />} label=<str>"Home"</str> active />17 <FooterItem icon={<Search />} label=<str>"Search"</str> />18 <FooterItem icon={<Bell />} label=<str>"Alerts"</str> badge={3} />19 <FooterItem icon={<User />} label=<str>"Profile"</str> />20 </Footer>21 </AppShell>22 );23}Ready to build?
Get started with AppShell in minutes. Install the package, copy the examples, and start building beautiful mobile-first React applications.