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,