Navigation

App Shell

Sidebar + header + content layout in one step.

Import

tsx

import { AppShell } from "@cooud-ui/ui";

bash

npx cooud-ui add app-shell

Examples

Shell layout

AppShell composes a sidebar, a sticky header and a content region in one step. It never renders a <main> — the route owns that landmark.

Dashboard

Your page content goes here.

tsx

<AppShell
  header={
    <>
      <SidebarTrigger />
      <span className="text-sm font-medium text-fg">Dashboard</span>
    </>
  }
  sidebar={
    <Sidebar collapsible="icon">
      <SidebarHeader>
        <span className="px-2 text-sm font-semibold text-fg">Acme Inc.</span>
      </SidebarHeader>
      <SidebarContent>
        <SidebarGroup>
          <SidebarGroupContent>
            <SidebarMenu>
              <SidebarMenuItem>
                <SidebarMenuButton isActive tooltip="Home">
                  <Home />
                  <span>Home</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
              <SidebarMenuItem>
                <SidebarMenuButton tooltip="Search">
                  <Search />
                  <span>Search</span>
                </SidebarMenuButton>
              </SidebarMenuItem>
            </SidebarMenu>
          </SidebarGroupContent>
        </SidebarGroup>
      </SidebarContent>
    </Sidebar>
  }
>
  <div className="p-6 text-sm text-fg-secondary">Your page content goes here.</div>
</AppShell>

API Reference

Generated from the component's exported types.

AppShellProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`sidebar`*	`ReactNode`	—	The sidebar element. Pass a `<Sidebar>` (and its trigger/menus). Rendered as the first child of the provider so it sits beside the content region.
`header`	`ReactNode`	—	Optional topbar content rendered inside a sticky `<header role="banner">` at the top of the content region. Omit for a header-less shell.
`providerProps`	`Omit<SidebarProviderProps, "children">`	—	Props forwarded to the underlying `SidebarProvider`.
`inset`	`boolean`	`false`	When `true`, wraps the content region in `SidebarInset` for the rounded, inset surface that pairs with `variant="inset" \| "floating"` sidebars.
`contentClassName`	`string`	—	Extra classes for the content region wrapper.
`headerClassName`	`string`	—	Extra classes for the sticky header.