gatsby-plugin-bianic-ui
Gatsby plugin for adding Chakra UI
Installation
⚡ 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
Usage
- Add
gatsby-plugin-bianic-ui
as a plugin in your Gatsby config.
// gatsby-config.jsmoduleexports = plugins: "gatsby-plugin-bianic-ui"
- Use Chakra ⚡
// src/pages/index.jsimport React from "react"import Box Text from "@bianic-ui/core" { return <Box => <Text ="xl">Hello World</Text> </Box> }
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 => <ColorModeProvider> <GlobalStyle /> isResettingCSS && <CSSReset /> <PortalManager =>element</PortalManager> </ColorModeProvider></ThemeProvider>
You can disable either of these with Gatsby options:
// gatsby-config.jsmoduleexports = plugins: resolve: "gatsby-plugin-bianic-ui" options: /** * @property * if `false`, this plugin will not use `<CSSReset /> */ isResettingCSS: true /** * @property * if `false`, this plugin will not use <ColorModeProvider /> */ isUsingColorMode: true /** * @property * 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.jsconst 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.