---
title: Set up the application layout
description: Configure the style source and compose application layout regions.
order: 10
toc:
  - id: styles
    title: Import the style source
  - id: compose
    title: Compose regions
  - id: sizes
    title: Adjust sizes
---

## Import the style source {#styles}

Import the Layout Tailwind source from the application stylesheet:

```css
@import "@workspace/layout/globals.css";
```

## Compose regions {#compose}

`AppLayout` accepts React nodes or component definitions without required props. Pass a node when the region needs business props, or pass a component definition when it should read layout state from context.

```tsx
<AppLayout
  header={AppHeader}
  rail={ActivityRail}
  sidebar={<NavigationSidebar groups={groups} />}
  aside={AssistantPanel}
  footer={StatusBar}
>
  <RouterOutlet />
</AppLayout>
```

Component definitions are created inside the `AppLayout` provider, so `AppHeader` and `AssistantPanel` can call `useLayoutConfig`.

## Adjust sizes {#sizes}

Use CSS custom properties to size the supporting columns:

```css
.application-layout {
  --layout-rail-width: 4rem;
  --layout-sidebar-width: 18rem;
  --layout-aside-width: 22rem;
}
```

Pass that class to `AppLayout`. The content column always consumes the remaining space and can shrink to zero width.