Introduction

Every mobile web app rewrites the same tricky 10% of UI: a header that hides politely on scroll, a tab bar that returns exactly when the thumb needs it, insets around notches, and a sidebar that is a drawer on phones but a persistent panel on desktop. appshell-react ships those as small composable components that coordinate through shared context and CSS variables like --header-height.

Animations run on plain CSS transitions by default — no animation library required. Wrap your app in MotionProvider with the optional Framer Motion adapter when you want springs. See Motion.

import { AppShell, Header, Content, Footer, FooterItem } from "appshell-react";
import { Home, Search, User } from "lucide-react";

export default function App() {
  return (
    <AppShell safeArea>
      <Header
        behavior="reveal-all"
        logo={<span className="font-bold">MyApp</span>}
        title="Home"
      />
      <Content>{/* your content */}</Content>
      <Footer variant="tab-bar" behavior="auto-hide">
        <FooterItem icon={<Home />} label="Home" active />
        <FooterItem icon={<Search />} label="Search" />
        <FooterItem icon={<User />} label="Profile" />
      </Footer>
    </AppShell>
  );
}

That is a complete native-feeling shell: the header reveals on scroll up, the tab bar auto-hides, and safe areas are handled. Head to Installation for the Tailwind v4 setup.

The examples gallery covers every variant as a small believable app, and the playground lets you mix every behavior, theme, speed, and footer variant on one phone — then copy the code.