AppShell
AppShell arranges an app’s header, navigation, aside, footer, and mobile navigation in a responsive frame.
Source
LLM docs
Package
Examples
2
Properties
60
Hooks
6
Basics
Arrange a header and page content inside a responsive app frame.
Loading demo…
import { AppShell, Block, Text } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth h={240}>
<AppShell
header={{ height: 48 }}
headerContent={<Text p="sm">App header</Text>}
autoLayout
withSafeArea={false}
>
<Block p="md">
<Text>Page content</Text>
</Block>
</AppShell>
</Block>
);
}Enhanced
Loading demo…
import { AppShell, Block, Text } from '@plocks/ui';
const sampleTOC = (
<Block>
<Text variant="h6" mb="sm">Contents</Text>
<Text size="sm" style={{ paddingLeft: 0 }}>Introduction</Text>
<Text size="sm" style={{ paddingLeft: 12 }}>Getting Started</Text>
<Text size="sm" style={{ paddingLeft: 12 }}>Installation</Text>
<Text size="sm" style={{ paddingLeft: 24 }}>NPM Package</Text>
<Text size="sm" style={{ paddingLeft: 24 }}>Yarn Setup</Text>
<Text size="sm" style={{ paddingLeft: 12 }}>Configuration</Text>
<Text size="sm" style={{ paddingLeft: 0 }}>Components</Text>
<Text size="sm" style={{ paddingLeft: 12 }}>AppShell</Text>
<Text size="sm" style={{ paddingLeft: 12 }}>Layout System</Text>
<Text size="sm" style={{ paddingLeft: 0 }}>Examples</Text>
</Block>
);
export function Demo() {
return (
<AppShell
header={{ height: 60 }}
navbar={{
width: 280,
breakpoint: 'md',
collapsed: { mobile: true }
}}
autoLayout
headerContent={() => (
<Text variant="h4" style={{ padding: 16 }}>
Documentation
</Text>
)}
navbarContent={() => (
<Block p="md">
<Text variant="h6">Navigation</Text>
<Text size="sm">Getting Started</Text>
<Text size="sm">Components</Text>
<Text size="sm">Examples</Text>
<Text size="sm">API Reference</Text>
</Block>
)}
maxContentWidth={960}
tableOfContents={sampleTOC}
tableOfContentsWidth={280}
hideTableOfContentsOnMobile
centerContent
>
<Block p="lg">
<Text variant="h1">Main Content with TOC</Text>
<Text>
This demonstrates the enhanced AppShell with max width constraints
and a table of contents sidebar. The main content area has a maximum
width and is centered, while the table of contents appears on the right
on desktop screens.
</Text>
<Text>
The layout is fully responsive - on mobile devices, the table of contents
is hidden by default to preserve screen space.
</Text>
<Text variant="h2">Features</Text>
<Text>
• Max width constraint for better readability on wide screens
</Text>
<Text>
• Table of contents sidebar with responsive behavior
</Text>
<Text>
• Configurable through AppShell or AppShellMain props
</Text>
<Text>
• Seamless integration with existing AppShell layout system
</Text>
</Block>
</AppShell>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources