How to add chakra-ui in gatsby project? – Code Example

In this article we will learn how to add chakra-ui to a gatsby project. First you will need to install it using npm or yarn. Then add @chakra-ui/gatsby-plugin to plugins list in gatsby-config.js file.

Code Example

1. Install Chakra-ui using npm or yarn –

# Using npm
npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

# using yarn
yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

2. Open gatsby-config.js file and add @chakra-ui/gatsby-plugin to plugins list –

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,
      },
    },
  ],
}