Chakra UI + Gatsby

Chakra UI is a great UI library to get your Gatsby website up and running fast. The setup is slightly different than other projects, however the API usage seen in the rest of the docs is the same!

Installation#

Gatsby plugins make external APIs plug-and-play into your website. Installing can be done with the following command:

npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion
# or
yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

Usage#

After installation, you'll need to add @chakra-ui/gatsby-plugin to the gatsby-config.js file.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@chakra-ui/gatsby-plugin",
      options: {
        /**
         * @property {boolean} [resetCSS=true]
         * if false, this plugin will not use `<CSSReset />
         */
        resetCSS: true,
        /**
         * @property {boolean} [isUsingColorMode=true]
         * if false, this plugin will not use <ColorModeProvider />
         */
        isUsingColorMode: true,
      },
    },
  ],
}

To use a custom theme, you can shadow this plugin’s theme.js file with your own theme:

// src/@chakra-ui/gatsby-plugin/theme.js
import { extendTheme } from "@chakra-ui/react"
const theme = {
  colors: {
    primary: "rebeccapurple"
  }
}
export default extendTheme(theme)

If you want to use the default theme there's no need to shadow the file.

Migration Notes#

From v1.x to v2.x#

The isUsingColorMode option was removed. The ChakraProvider will always use the ColorModeProvider
The isResettingCSS option was renamed to resetCSS

From v0.8.x to v1.x#

The Gatsby plugin has been renamed from gatsby-plugin-chakra-ui to @chakra-ui/gatsby-plugin. Please make sure to have updated this when installing Chakra UI in your next Gatsby project.

Edit this page