Category

Organisms

Component

AppShell

Page wrapper for the application. It holds the background, layout with a sidebar column, and scrolling (the main area scrolls, not the sidebar). Variants: boxed and canvas.

API

variant: boxed (default) or canvas. sidebar: any sidebar component (typically Sidebar).

Composition (example)

AppShell + Sidebar (inline/drawer) is our foundation for application and documentation layouts.

Canvas content area

Responsive layout behavior

  • AppShell height: always full-screen via h-screen.
  • Main scrolling: the main area scrolls (overflow-y-auto), the sidebar stays fixed.
  • Padding changes with breakpoints: px-4 on mobile, lg:px-8 on desktop.
  • Canvas vs boxed: boxed uses the floating rounded container; canvas renders content directly on the background (same responsive padding strategy).