Layouts

App Shell

A full-page side-navigation layout: a fixed sidebar with logo, navigation, and footer beside a scrollable main region. On mobile the sidebar collapses into a drawer opened by AppShellSidebarTrigger. Use as the root layout for dashboard-style applications.

Sourcesrc/components/app-shell.tsx

Structure

Dashboard

PageBody content goes here.

Every box above is the component named in the code, not a drawing of one. That matters most for one line: the bottom border of AppShellLogo meets the bottom border of the PageHeaderbeside it, across the sidebar's edge. A diagram built from divs draws that line straight whatever the components do; this one only looks right when it is. Below md the sidebar is gone from the specimen too — the hamburger in the bar opens it as a drawer.

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.
`mobileTitle`	`string`	`"Navigation"`	Accessible title for the mobile drawer, announced to screen readers.
`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.

Responsive Behavior

On md and larger the sidebar is a fixed column. Below md it is hidden and its contents are mirrored into a drawer. Render an AppShellSidebarTrigger somewhere always-visible on mobile (typically inside your PageHeader) to open it. The trigger is itself hidden on md+, so it never shows on desktop.

Prop	Type	Default	Description
`className`	`string`	—	Additional classes. The trigger is hidden on md+ by default (md:hidden).