Community Plugin

🚨 Chakra v0 is no longer supported and this plugin is likely broken! Please upgrade to Chakra UI v1 and use @chakra-ui/gatsby-plugin instead. Visit https://chakra-ui.com/ for more information. 🚨

gatsby-plugin-chakra-ui

Drop-in Chakra UI support for Gatsby sites

Installation

⚡ To use Chakra UI in your Gatsby site, you need to install the plugin and its peer dependencies.

$ yarn add gatsby-plugin-chakra-ui @chakra-ui/core @emotion/core @emotion/styled emotion-theming

Usage

Basic

Add gatsby-plugin-chakra-ui as a plugin in your Gatsby config.

// gatsby-config.js
module.exports = {
  plugins: ["gatsby-plugin-chakra-ui"],
};

Use Chakra ⚡

// src/pages/index.js
import React from "react";
import { Box, Text } from "@chakra-ui/core";

function IndexPage() {
  return (
    <Box p={8}>
      <Text fontSize="xl">Hello World</Text>
    </Box>
  );
}

export default IndexPage;

Gatsby plugin options

By default, this plugin makes use of Chakra CSS reset component and color mode context:

<ThemeProvider theme={theme}>
  <CSSReset />
  <ColorModeProvider>{element}</ColorModeProvider>
</ThemeProvider>

You can disable either of these with Gatsby options:

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

Custom theme

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

// src/gatsby-plugin-chakra-ui/theme.js
const theme = {};

export default theme;

You can learn more about custom theme at Chakra UI’s documentation.

By default, Chakra provides a sensible default theme inspired by Tailwind CSS.