# Layouts overview (https://docs.salla.dev/twilight/react/layouts)



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

Every page the engine draws sits inside a **frame**: a header on top, a footer at the bottom, and a few global pop-ups (login, offers, branches). Account pages get one extra frame on the left: the account menu.

That is all there is. Two frames, both replaceable:

| Frame                                        | Where you see it                                | Replace it by                                                      |
| -------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------ |
| [`MasterLayout`](https://docs.salla.dev/twilight/react/layouts/master-layout)     | **Every** page: header, footer, global modals   | The `layout` prop of `TwilightProvider` in `app/routes/__root.tsx` |
| [`CustomerLayout`](https://docs.salla.dev/twilight/react/layouts/customer-layout) | **Only** `/account` pages: the menu on the left | Your own `account` route in `app/routes.ts`                        |

## What a customer sees [#what-a-customer-sees]

<PageLayout
  title="Any page (home, product, cart, blog...)"
  url="/product-name/p123"
  chrome="false"
  nodes="[
  { group: 'Header', tone: 'chrome', note: 'MasterLayout', nodes: [{ block: 'Announcement bar, logo, menu, search, cart', size: 'xs' }] },
  { block: 'The page: a route you can replace', size: 'xl' },
  { group: 'Footer', tone: 'chrome', note: 'MasterLayout', nodes: [{ block: 'Links, apps, copyright', size: 'xs' }] },
  { block: 'Pop-ups, shown on demand: login, offers, branch picker', size: 'xs', note: 'MasterLayout' },
]"
/>

<PageLayout
  title="Account page (profile, orders, wishlist...)"
  url="/account/orders"
  chrome="false"
  nodes="[
  { group: 'Header', tone: 'chrome', note: 'MasterLayout', nodes: [{ block: 'Announcement bar, logo, menu, search, cart', size: 'xs' }] },
  { cols: [
    { w: 1, nodes: [{ group: 'CustomerLayout', note: 'account only', nodes: [{ block: 'Account menu', size: 'lg' }] }] },
    { w: 3, nodes: [{ group: 'CustomerLayout', note: 'account only', nodes: [
      { block: 'Breadcrumb and page title', size: 'xs' },
      { block: 'The account page: a route you can replace', size: 'lg' },
    ] }] },
  ] },
  { group: 'Footer', tone: 'chrome', note: 'MasterLayout', nodes: [{ block: 'Links, apps, copyright', size: 'xs' }] },
]"
/>

The header and footer are the same on both. The only difference is that `CustomerLayout` wraps the account page with the menu and the title.

Inside `MasterLayout` the header and footer are separate pieces you can swap one at a time: [`Header`, `Footer`, `PageAdvertisements` and `WidgetHead`](https://docs.salla.dev/twilight/react/layouts/header-and-footer).

## I want to change... what do I do? [#i-want-to-change-what-do-i-do]

| I want to                                                  | Do this                                                                                                     | Effort                                             |
| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
| Add a banner or a tracking snippet in the header or footer | Fill a [slot](https://docs.salla.dev/twilight/react/slots/page-frame): `header:start`, `footer:end`...                                           | A few lines, keeps every engine update             |
| Use my own header or footer                                | Write your own `Header` / `Footer` and a layout that uses them. [Steps](https://docs.salla.dev/twilight/react/layouts/master-layout#replace-it)  | You own that part                                  |
| Change the whole frame                                     | Pass `layout={YourLayout}` to `TwilightProvider`. You also bring the global modals                          | You own the frame                                  |
| Change the account menu or title                           | Replace the `/account` route. [Steps](https://docs.salla.dev/twilight/react/layouts/customer-layout#replace-it)                                  | You own the account area                           |
| Draw no frame at all                                       | `layout={false}`                                                                                            | Only if something else draws it                    |
| Show my own page while the store is in maintenance         | Pass `maintenancePage={YourPage}` to `TwilightProvider`. [Details](https://docs.salla.dev/twilight/react/data/store#is-the-store-in-maintenance) | You own that page; it renders alone, with no frame |

Start at the top of the table and only go down when you must.

<Callout type="warn">
  `layout={false}` removes the header, the footer and the login modal from every page.
</Callout>

## Hooks that help you style a layout [#hooks-that-help-you-style-a-layout]

* Every page sets a class on `<body>` for its route, so you can scope styles to one page. `CustomerLayout` adds `customer` to every account page. See [Styling](https://docs.salla.dev/twilight/react/guide/styling).
* [`useDocumentClass`](https://docs.salla.dev/twilight/react/guide/styling) lets your own layout add classes to `<html>` or `<body>`.

## Next [#next]

* [`MasterLayout`](https://docs.salla.dev/twilight/react/layouts/master-layout): the default frame, and how to replace it.
* [`CustomerLayout`](https://docs.salla.dev/twilight/react/layouts/customer-layout): the account area.
* [`Header` and `Footer`](https://docs.salla.dev/twilight/react/layouts/header-and-footer): the parts and their slots.