Dashboard

A dashboard is not a dedicated component — it's the App Shell with a Grid of widgets in its content body (the Chat slot is optional, so the same scaffold serves an ordinary two-column console screen). Use the Grid's container mode so the widget columns respond to the main content's width (which shrinks as the sidebar expands), not the viewport.

Assembly

<AppShellChat>
  <AppShellChatSidebar><SidebarPrimary … /></AppShellChatSidebar>
  <AppShellChatContent>
    <AppShellChatContentHeader>{/* account menu / actions */}</AppShellChatContentHeader>
    <AppShellChatContentBody>
      <PageHeader>
        <PageHeaderRow><PageHeaderTitle>Overview</PageHeaderTitle></PageHeaderRow>
      </PageHeader>
      <Grid container cols={3}>
        {widgets.map((w) => <WidgetPlaceholder key={w.id} {...w} />)}
      </Grid>
    </AppShellChatContentBody>
  </AppShellChatContent>
</AppShellChat>

When to use

• Overview / dashboard screens made of a grid of widget cards.

Anti-patterns

• Reaching for a bespoke "dashboard layout" component — it's just the App Shell + a container Grid.
• A viewport-breakpoint Grid inside the App Shell's content body — the columns won't account for the sidebar width; use <Grid container>.