AppShell

The root layout component that provides context for all child components and handles safe area insets for mobile devices.

Fullscreen

9:41

Installation

bash

1npm install appshell-react

Usage

Wrap your application with AppShell to enable the layout system:

app.tsx

1import { AppShell, Header, Content, Footer } from "appshell-react";
2 
3export default function App() {
4  return (
5    <AppShell safeArea>
6      <Header behavior="fixed" logo={<span>Logo</span>} />
7      <Content className="p-4">
8        {/* Your content */}
9      </Content>
10      <Footer variant="tab-bar">
11        {/* Footer items */}
12      </Footer>
13    </AppShell>
14  );
15}

With Animations

For smooth animations, wrap your app with MotionProvider and pass a motion adapter:

app.tsx

1import { AppShell, MotionProvider } from "appshell-react";
2import { framerMotionAdapter } from "appshell-react/motion-framer";
3 
4export default function App() {
5  return (
6    <MotionProvider adapter={framerMotionAdapter}>
7      <AppShell safeArea>
8        {/* Your app content with smooth animations */}
9      </AppShell>
10    </MotionProvider>
11  );
12}

Props

Prop	Type	Default	Description
safeArea	boolean	false	Enable safe area insets for notched devices
className	string	-	Additional CSS classes
children	ReactNode	-	Header, Content, Footer, and Sidebar components

Safe Areas

When safeArea is enabled, AppShell automatically handles insets for devices with notches, rounded corners, or home indicators. It sets CSS custom properties that child components use:

css

1/* These variables are set automatically */
2:root {
3  --sa-top: env(safe-area-inset-top);
4  --sa-bottom: env(safe-area-inset-bottom);
5  --sa-left: env(safe-area-inset-left);
6  --sa-right: env(safe-area-inset-right);
7}

Next: Header