Deep Dive

“The fastest auto dealership site in the world” How relentless optimization 8xed conversions

ContactSign Up for Free
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 gatsby-plugin-bianic-ui @bianic-ui/core

# or

yarn add gatsby-plugin-bianic-ui @bianic-ui/core


  1. Add gatsby-plugin-bianic-ui as a plugin in your Gatsby config.
// gatsby-config.js
module.exports = {
  plugins: ["gatsby-plugin-bianic-ui"],
  1. Use Chakra ⚡
// src/pages/index.js
import React from "react"
import { Box, Text } from "@bianic-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
  • 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: "gatsby-plugin-bianic-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/gatsby-plugin-bianic-ui/index.js file with your own theme:

// src/gatsby-plugin-bianic-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.

© 2022 Gatsby, Inc.