Menus & Navigation

App Shell

Server Component

Sidebar + header + content layout in one step.

Import

tsx

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

bash

npx cronus-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>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component AppShellDefault layout:inline style:app-shell {
  description:"Inbox"
  aria-label:"App"
  label "Acme"
  text "Home"
  text "Inbox"
}

page "/audit/app-shell/default" type:custom {
  use AppShellDefault
}

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.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.