AppShell
Markdown for agentsApplication frame: sectioned sidebar, sticky header and scrolling main; the sidebar becomes a mobile drawer with a built-in burger button.
npx slipstream-ui@latest add app-shellDashboard shell (interactive)
Studio
Dashboard
Current route: #dashboard
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| sidebar | ReactNode | — | Desktop rail content; also rendered inside the mobile drawer (AppShell). |
| header | ReactNode | — | Sticky top bar content (AppShell). |
| hideMobileMenu | boolean | false | Hide the built-in burger when the header owns navigation (AppShell). |
| sidebarWidth | string | 'w-64' | Tailwind width class for the desktop rail (AppShell). |
| sections | { title?: string; items: SidebarItem[] }[] | required | Grouped navigation items (Sidebar). |
| activeHref | string | — | Current route — matching items get aria-current="page" (Sidebar). |
| linkComponent | React.ElementType | 'a' | Router link component (react-router Link, Next Link) (Sidebar). |
| heading / footer | ReactNode | — | Brand slot at the top and utility slot at the bottom (Sidebar). |
Accessibility
- Sidebar renders a named nav landmark; the active item carries aria-current="page".
- On small screens the rail becomes a focus-trapped Drawer with Escape and focus restoration.
- Pass your router’s Link so navigation stays client-side.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.