See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
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;



© 2022 Gatsby, Inc.