Patterns
App shell
Responsive composition of navigation, content, header, and footer.
View the full responsive shell with dashboard, contacts, and settings examples.
Open shell exampleInteractive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| sidebar | ReactNode | required |
| children | ReactNode | required |
| header / footer / mobileBrand | ReactNode | — |
| variant | "member" | "admin" | "member" |
| mainId | string | "app-content" |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- The desktop sidebar becomes a focus-trapped drawer below 1024px. Selecting a Sidebar link closes the drawer; resizing to desktop dismisses it.
- Match the shell variant to Sidebar: member is 275px and admin is 225px. Supply a unique mainId if multiple shells share a document.
- The /examples playground includes member and admin variants, local member creation, filtering, profile settings, and notification dialogs.
- mobileBrand, variant, mainId, and drawer fixes are available in 0.1.1 and later. Application routing remains consumer-owned.
Reference
Member shell; mobile drawer behavior adapted with Radix