React 19 · Tailwind v4 · MIT
The app shell your mobile web app deserves
Scroll-aware headers, tab bars, drawers, and safe areas — composable React components that make a web app feel native, without you writing a single scroll listener.
10
header behaviors
3
footer variants
27
live demos
0
scroll listeners to write
live demo — scroll it
Why AppShell
The tricky 10% of mobile UI, solved once
Scroll choreography, safe-area math, and header coordination are the parts every mobile web app rewrites. AppShell ships them as composable primitives.
Scroll-aware
Headers and footers that hide, reveal, and dock in response to scroll direction — per row, not all-or-nothing.
Safe areas, handled
Notches, Dynamic Islands, and home indicators are padded automatically, with CSS-variable overrides for testing.
Composable rows
Logo, nav, title, and search are independent header rows. Use one or stack all four.
Zero-dependency core
CSS transitions out of the box. Add the optional Framer Motion adapter when you want springs.
Token-driven theming
Styled with standard shadcn/ui custom properties — your existing theme just works, dark mode included.
Typed end to end
Every variant is a string union: your editor autocompletes behaviors, themes, speeds, and positions.
Declarative API
One component tree, all the choreography
Declare what each bar should do — the shell coordinates visibility, heights, and safe areas between them.
- 10 header behaviors, from fixed to per-row reveal
- Tab bars, floating pills, and mini bars that auto-hide
- Sticky sub-navigation via the --header-height variable
- Sidebars: modal drawers, and docked panels with icon rails
import { AppShell, Header, Content, Footer, FooterItem } from "appshell-react";
import { Home, Search, Bell, User } from "lucide-react";
export default function App() {
return (
<AppShell safeArea>
<Header
behavior="reveal-all"
logo={<Logo />}
title="Home"
subtitle="Catch up on today"
/>
<Content>
{/* Your content */}
</Content>
<Footer variant="tab-bar" behavior="auto-hide">
<FooterItem icon={<Home />} label="Home" active />
<FooterItem icon={<Search />} label="Search" />
<FooterItem icon={<Bell />} label="Alerts" badge={3} />
<FooterItem icon={<User />} label="Profile" />
</Footer>
</AppShell>
);
}Examples
27 small apps, every variant
Reveal All Rows
Title and search rows tuck away on scroll down — the full header glides back the moment you scroll up.
Floating Action
An elevated pill for the primary action, with left, center, and right positioning.
Sidebar Drawer
A slide-out drawer with backdrop, collapsible groups, and left or right placement.
Ship a native-feeling shell today
Install the package, pick a pattern from the examples, and your layout is done before lunch.