Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Never write wrapPageElement or wrapRootElement again


For theme/plugin authors, please don’t use this plugin as the layout components may be shadowed by the users of your library.

Table of Contents


npm install gatsby-plugin-layouts


1. Register plugin

In gatsby-config.js:

module.exports = {
  plugins: [


2. Shadow the layout components

a. To create PageLayout

Create src/gatsby-plugin-layouts/page.layout.js:

import React from "react";
import Layout from "../components/Layout";

const PageLayout = ({ children }) => {
  return (

export const BrowserPageLayout = PageLayout;
export const SsrPageLayout = PageLayout;

a. To create RootLayout

Create src/gatsby-plugin-layouts/root.layout.js:

import React from "react";
import { ThemeProvider } from "emotion-theming";

const RootLayout = ({ children }) => {
  return (

export const BrowserRootLayout = RootLayout;
export const SsrRootLayout = RootLayout;



© 2023 Gatsby, Inc.