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

Total
0
Shares

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
# 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
# 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 –

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