Content
The main scrollable area that automatically handles spacing for headers and footers.
Usage
Content is the main scrollable container for your application:
app.tsx
1import { AppShell, Header, Content } from "appshell-react";2 3export default function App() {4 return (5 <AppShell safeArea>6 <Header behavior="fixed" logo={<span>App</span>} />7 <Content className="p-4">8 <h1 className="text-2xl font-bold">Welcome</h1>9 <p>Your content goes here...</p>10 </Content>11 </AppShell>12 );13}With Footer
When using a footer, add bottom padding to prevent content from being hidden:
tsx
1<AppShell safeArea>2 <Header behavior="fixed" logo={<span>App</span>} />3 <Content className="pb-24">4 {/* Extra bottom padding for footer */}5 </Content>6 <Footer variant="tab-bar">7 {/* Footer items */}8 </Footer>9</AppShell>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | - | Additional CSS classes |
| style | CSSProperties | - | Inline styles |
| children | ReactNode | - | Content children |
Scroll Events
Content automatically tracks scroll position and direction, which is used by Header and Footer components for auto-hide behavior. You can access this information using the useAppShell hook.