Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby plugin for adding Chakra UI


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

npm i @hackr/gatsby-plugin-chakra-ui @hackr/chakra-ui-core

# or

yarn add @hackr/gatsby-plugin-chakra-ui @hackr/chakra-ui-core


  1. Add @hackr/gatsby-plugin-chakra-ui as a plugin in your Gatsby config.
// gatsby-config.js
module.exports = {
  plugins: ["@hackr/gatsby-plugin-chakra-ui"],
  1. Use Chakra ⚡
// src/pages/index.js
import React from "react"
import { Box, Text } from "@hackr/chakra-ui-core"

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

export default IndexPage

Plugin options

By default, this plugin adds a couple of context providers to make all components work correctly.

  • ThemeProvider: To provide the theme context to all components.
  • ColorModeProvider: To provide the current preferred color mode stored in localStorage
  • GlobalStyles: To add global styles defined in theme.styles.global
  • CSSReset: To add browser reset styles
  • PortalManager: To manage portals used by modal, popover, etc
<ThemeProvider theme={theme}>
    <GlobalStyle />
    {isResettingCSS && <CSSReset />}
    <PortalManager zIndex={portalZIndex}>{element}</PortalManager>

You can disable either of these with Gatsby options:

// gatsby-config.js
module.exports = {
  plugins: [
      resolve: "@hackr/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,
         * @property {number} [portalZIndex=40]
         * The z-index to apply to all portal nodes. This is useful
         * if your app uses a lot z-index to position elements.
        portalZIndex: 40,

Customizing the theme

To use customize the theme in your Gatsby site, you can shadow the plugin’s src/@hackr/gatsby-plugin-chakra-ui/index.js file with your own theme:

// src/@hackr/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.

© 2023 Gatsby, Inc.