App Shell

A full-page layout organism that provides a sidebar, navigation, logo area, and scrollable main content region. Use as the root layout for dashboard-style applications.

Structure Diagram

AppShellLogo

AppShellNavItem (active)

AppShellNavItem

AppShellFooter

PageHeader

PageBody (scrollable)

import {
  AppShell,
  AppShellSidebar,
  AppShellLogo,
  AppShellNav,
  AppShellNavItem,
  AppShellFooter,
  AppShellMain,
} from "@/components/app-shell"
import { PageHeader, PageHeaderContent, PageHeaderTitle } from "@/components/page-header"
import { PageBody } from "@/components/page-body"

<AppShell>
  <AppShellSidebar>
    <AppShellLogo>Acme Inc</AppShellLogo>
    <AppShellNav>
      <AppShellNavItem icon={HomeIcon} active href="/">
        Dashboard
      </AppShellNavItem>
      <AppShellNavItem icon={SettingsIcon} href="/settings">
        Settings
      </AppShellNavItem>
    </AppShellNav>
    <AppShellFooter>v1.0.0</AppShellFooter>
  </AppShellSidebar>
  <AppShellMain>
    <PageHeader>
      <PageHeaderContent>
        <PageHeaderTitle>Dashboard</PageHeaderTitle>
      </PageHeaderContent>
    </PageHeader>
    <PageBody>
      {/* page content */}
    </PageBody>
  </AppShellMain>
</AppShell>

AppShell Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes to apply to the app shell container.

AppShellSidebar Props

Prop	Type	Default	Description
`collapsed`	`boolean`	`false`	Whether the sidebar is in collapsed state.
`className`	`string`	—	Additional CSS classes to apply to the sidebar.

AppShellNavItem Props

Prop	Type	Default	Description
`icon`	`React.ComponentType<{ className?: string }>`	—	Optional icon component rendered before the label.
`active`	`boolean`	`false`	Whether this item represents the current page.
`href`	`string`	—	The link destination for the navigation item.