App Shell

App Shell provides a structured page layout with header, sidebar, main, and footer areas. Supports collapsible sidebars.

Basic Usage

import { Shell, ShellHeader, ShellSidebar, ShellMain, ShellFooter } from "@paramanu/primitives-react"

export default function App() {
return (
  <Shell style={{ height: 400 }}>
    <ShellHeader sticky>Header</ShellHeader>
    <ShellSidebar width="md">Sidebar</ShellSidebar>
    <ShellMain>Main Content</ShellMain>
    <ShellFooter>Footer</ShellFooter>
  </Shell>
)
}

<div class="pm-shell pm-shell--sidebar-start" style="height: 400px; border: 1px solid #e2e8f0;">
<header class="pm-shell__header pm-shell__header--sticky" style="padding: 12px; background: #f8fafc;">Header</header>
<aside class="pm-shell__sidebar pm-shell__sidebar--md" style="padding: 12px; background: #f1f5f9;">Sidebar</aside>
<main class="pm-shell__main" style="padding: 12px;">Main Content</main>
<footer class="pm-shell__footer" style="padding: 12px; background: #f8fafc;">Footer</footer>
</div>

Accessibility

Use semantic landmarks: <header>, <aside>, <main>, and <footer>. The sidebar toggle should be keyboard accessible.

React Props (Shell)

Prop	Type	Default	Description
`sidebarCollapsed`	`boolean`	—	Controlled collapsed state
`sidebarPosition`	`"start" \| "end"`	`"start"`	Sidebar position
`defaultSidebarCollapsed`	`boolean`	`false`	Initial collapsed state

React Props (ShellHeader)

Prop	Type	Default	Description
`sticky`	`boolean`	`false`	Sticky positioning

React Props (ShellSidebar)

Prop	Type	Default	Description
`width`	`"sm" \| "md" \| "lg"`	`"md"`	Sidebar width
`collapsed`	`boolean`	—	Override collapsed state

CSS Classes

Class	Purpose
`pm-shell`	Container
`pm-shell__header`	Header
`pm-shell__sidebar`	Sidebar
`pm-shell__main`	Main content
`pm-shell__footer`	Footer
`pm-shell--sidebar-collapsed`	Collapsed sidebar