Themeparent
AppShell should be wrapped in ThemeProviderAppShell
Full layout wrapper integrating sidebar, header, main content, and optional aside panel. Two structural layouts (default, sidebar) combine with per-slot variant="floating" for full flexibility.
Setup
import { AppShell } from '@fragments-sdk/ui';Examples
Default Layout
Header spans full width above sidebar (default). Best when brand/logo should be prominent in header.
Loading preview...
Sidebar Layout
Sidebar is full height, header sits next to it. Best for documentation sites or when sidebar branding is preferred.
Loading preview...
With Aside Panel
App shell with optional right panel for additional context or actions.
Loading preview...
Collapsible Icon Sidebar
Sidebar that collapses to icons only on desktop.
Loading preview...
Floating Main
Sidebar layout with floating main content. Per-slot variant="floating" gives the main area rounded corners and a distinct background, while the sidebar blends with the shell.
Loading preview...
Floating Main & Aside
Both main content and aside panel float with rounded corners. Each slot independently opts into the floating visual treatment via variant="floating".
Loading preview...
Floating Default Layout
Default header-on-top structure with a floating main content area. Demonstrates that floating is independent of structure — any slot can float in any layout.
Loading preview...
Custom Backgrounds
Each slot accepts a bg prop to override its background color independently. Here the sidebar and aside use bg-elevated (lighter) while main uses bg-primary (darker).
Loading preview...
Props
| Prop | Type | Default | Description |
|---|---|---|---|
childrenRequired | node | Not set | Layout content (use AppShell.Header, AppShell.Sidebar, AppShell.Main, AppShell.Aside) |
layout | enumdefaultsidebarsidebar-floatingfloating | default | Structural layout for CSS grid areas |
bg | string | Not set | Background color override for the shell container (accepts any CSS color or token reference like "var(--fui-bg-secondary)") |
style | object | Not set | — |
Usage Guidelines
When to use
- Building dashboard-style applications
- Apps with persistent sidebar navigation
- Layouts requiring header, sidebar, and main content areas
- Responsive layouts that need mobile drawer behavior
When not to use
- Simple marketing pages (use standard layout)
- Content-first sites without navigation (use simpler layout)
- Single-page apps with minimal UI (use minimal layout)
Best practices
- Use layout="default" when header should span full width (logo in header)
- Use layout="sidebar" when sidebar should be full height (logo in sidebar)
- Add variant="floating" to individual slots for rounded, elevated appearance
- Use bg prop on any slot to override its background color
- Combine layout with per-slot variants freely — no enum explosion
- AppShell automatically wraps with SidebarProvider
- Use AppShell.Sidebar to configure sidebar width and collapse behavior
- Main content responds to sidebar collapsed state
- Aside panel is hidden on mobile automatically
Accessibility
- Main content area has id="main-content" for skip links
- Use Header.SkipLink for keyboard navigation
- Sidebar drawer has proper focus trap on mobile
- Keyboard navigation supported throughout