Layouts

Layouts serve as reusable UI containers that wrap multiple pages while providing three key benefits:

  • State Preservation: Components within layouts maintain their state across page transitions

  • Consistent Interactivity: Interactive elements remain fully functional during navigation

  • Performance Optimization: The layout components avoid unnecessary rerenders when users navigate between pages

Site Layout fundamentals

Site layout represents the body element for all pages in the site.

To set global body background color, text color, font family etc. select Site layout from the Navigator and set your desired styling.

Shared components

Since the Site layout wraps all the pages, you typically want to add/place your site header and footer with Site layout selected with page slotted in between in the composition panel.

Nested layouts

Any number of sub layouts can be added under the Site layout.

Pages inside these sub layouts will utilize the layout of the sub layout and the parent Site layout.

Ex.: /blog and /blog/posts-<slug> pages can be placed inside a “Blog” layout nested under Site.

Sample use case: A sidebar can be added in the Blog layout and this sidebar will be shown only on the Blog index page and blog detail pages (because these pages are inside the Blog layout) but not on other pages like About.

Style cascading

Styles set with Site layout selected cascade down to all the elements on all pages.

Performance boost

Layouts improves performance because the shared parts of the layouts like the header and footer do not get fetched from the server as users navigate to different pages in the frontend.

Templates

Nested layouts (package of pages and URL structure) can be added to the library for one-click reuse.

Dark & light mode

Dark/light theme toggling in the builder can be set for all pages via color tokens.

It is also possible to force the color theme to be dark or light for a particular nested layout.

Whether you’re organizing a large site, templating an agency’s workflow or just cleaning up your CSS, layouts will become your new favorite Clutch feature.