# MasterLayout (https://docs.salla.dev/twilight/react/layouts/master-layout)



`MasterLayout` is the frame the engine puts around every page. You rarely import it. Read this page to know what you get by default, and what you must bring along when you replace it with your own layout.

<Callout title="Framework: TanStack Start">
  This page is written for TanStack Start, the default and currently supported framework. [See what depends on the framework](https://docs.salla.dev/twilight/react/start/frameworks).
</Callout>

## Use it [#use-it]

`TwilightProvider` uses `MasterLayout` unless you pass your own `layout`. A theme replaces it like this:

```tsx title="app/routes/__root.tsx"
<TwilightProvider translations={themeTranslations} layout={ThemeLayout}>
  <Outlet />
</TwilightProvider>
```

## Replace it [#replace-it]

Write a layout that takes `{ children }` and pass it to the provider. Keep what you still need from the list below: the header and footer, a `<main>` around `children`, and the global modals.

```tsx title="app/components/layout/ThemeLayout.tsx"
import { Suspense } from 'react';
import type { LayoutProps } from '@salla.sa/twilight-theme-engine/types';
import { Footer } from '@salla.sa/twilight-theme-engine/layout';
import { Header } from './Header';

export function ThemeLayout({ children }: LayoutProps) {
  return (
    <div className="app-inner flex min-h-full flex-col">
      <Header />
      <main id="main-content" className="flex-1">
        {children}
      </main>
      <Suspense fallback={null}>
        <Footer />
      </Suspense>
    </div>
  );
}
```

This one keeps the engine's footer and brings its own header, like the starter theme. The engine's `Footer` loads lazily, hence the `<Suspense>`. Passing `layout={false}` removes the frame completely.

## API [#api]

```ts
function MasterLayout(props: LayoutProps): JSX.Element;

interface LayoutProps {
  children: ReactNode;
}
```

| Prop       | Type        | Description                 |
| ---------- | ----------- | --------------------------- |
| `children` | `ReactNode` | The current page. Required. |

## What it renders [#what-it-renders]

* The engine `Header`, a `<main id="main-content">` around `children`, and the engine `Footer`.
* The offer modal, always.
* The login modal, only when the customer is not logged in. It follows the store's email and mobile login settings.
* The scopes dialog, when the store defines a scope.

## Gotchas [#gotchas]

* Your own layout receives the same `{ children }` and replaces all of the above. Include the modals you still need. The starter theme's `ThemeLayout` copies them.
* The `header:*` and `footer:*` [slots](https://docs.salla.dev/twilight/react/hooks/hook-slot) live inside the engine `Header` and `Footer`. If your layout uses its own, render the slots there.
* `Header`, `Footer`, `Copyright`, `WidgetHead` and `CustomerLayout` are also exported from `@salla.sa/twilight-theme-engine/layout` and load lazily. `PageAdvertisements`, the merchant's announcement bar that the engine `Header` renders, is exported there too and is not lazy. A header of your own should render it (see [Header and footer](https://docs.salla.dev/twilight/react/layouts/header-and-footer#the-announcement-bar)).

## Next [#next]

* [Layouts overview](https://docs.salla.dev/twilight/react/layouts): every layout and how to replace it.
* [Layout and components](https://docs.salla.dev/twilight/react/guide/layout-and-components) shows how to build your own layout step by step.
* [`HookSlot`](https://docs.salla.dev/twilight/react/hooks/hook-slot) for the slots a layout should keep.