Layouts overview
The page frames the engine ships, which ones you can replace, and how.
Framework: TanStack Start
This page is written for TanStack Start, the default and currently supported framework. See what depends on the framework.
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 | Every page: header, footer, global modals | The layout prop of TwilightProvider in app/routes/__root.tsx |
CustomerLayout | Only /account pages: the menu on the left | Your own account route in app/routes.ts |
What a customer sees
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.
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: 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 | 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 | You own the account area |
| Draw no frame at all | layout={false} | Only if something else draws it |
Start at the top of the table and only go down when you must.
layout={false} removes the header, the footer and the login modal from every page.
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.CustomerLayoutaddscustomerto every account page. See Styling. useDocumentClasslets your own layout add classes to<html>or<body>.
Next
MasterLayout: the default frame, and how to replace it.CustomerLayout: the account area.HeaderandFooter: the parts and their slots.