---
title: Application shell
description: Assemble the shared header, sidebar, breadcrumbs, chat, and notification surfaces.
order: 11
toc:
  - id: render-app-layout
    title: Render AppLayout
  - id: layout-inputs
    title: Layout inputs
  - id: optional-preset
    title: Optional preset
---

## Render AppLayout {#render-app-layout}

`AppLayout` is the integration point for the rest of this tutorial:

```tsx
import { AppLayout } from "@workspace/blocks/layout"

export function WorkspaceLayout() {
  return (
    <AppLayout
      navigationGroups={navigationGroups}
      notifications={{
        queryKey: ["notifications"],
        queryFn: loadNotifications,
      }}
      chatThreads={chatThreads}
    >
      <Outlet />
    </AppLayout>
  )
}
```

## Layout inputs {#layout-inputs}

The shell composes `AppSidebar`, `AppBreadcrumb`, `AppQueryIndicator`, `UserMenu`, a notification sheet, and chat threads. Pass `headerActions` when the product needs additional global controls.

The route content remains the layout's `children`, so the package does not constrain the router used by the application.

## Optional preset {#optional-preset}

`@workspace/blocks/layouts/vega` provides an optional visual shell. It lives on a separate entry point so the standard layout does not include preset-specific code.