# @chakra-ui/gatsby-plugin

> Drop-in Chakra UI support for Gatsby sites

Latest version **3.1.3** (published 2023-04-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install @chakra-ui/gatsby-plugin
pnpm add @chakra-ui/gatsby-plugin
yarn add @chakra-ui/gatsby-plugin
bun add @chakra-ui/gatsby-plugin
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads; no types; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 3.1.3 |
| Published | 2023-04-25 |
| First published | 2020-11-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 40702 |
| Author | Alex Luong |
| Maintainers | timkolberger, segunadebayo, _codebender828 |
| Keywords | chakra-ui, gatsby, gatsby-plugin |

## Links

- npm: https://www.npmjs.com/package/@chakra-ui/gatsby-plugin
- Repository: https://github.com/chakra-ui/chakra-ui
- Homepage: https://chakra-ui.com/
- Issues: https://github.com/chakra-ui/chakra-ui/issues
- npm.io page: https://npm.io/package/@chakra-ui/gatsby-plugin

## Recent versions

- 3.1.3 (latest) — 2023-04-25
- 3.1.5 (v2-latest) — 2025-02-19
- 0.0.0-dev-20240115120705 (dev) — 2024-01-15
- 0.0.0-v3-20240109123510 (next) — 2024-01-09
- 0.0.0-next-dev-202241614737 (next-dev) — 2022-05-16
- 0.0.0-pr-202212011232 (pr) — 2022-02-20
- 0.0.0-canary-2021118164051 (canary) — 2021-12-08
- 3.1.4 — 2024-11-07
- 0.0.0-v2-latest-20241107153126 — 2024-11-07
- 0.0.0-dev-20240112001210 — 2024-01-12
- 0.0.0-dev-20240110191159 — 2024-01-10
- 0.0.0-dev-20230424225650 — 2023-04-24
- 0.0.0-dev-20230424222806 — 2023-04-24
- 0.0.0-dev-20230424221053 — 2023-04-24
- 0.0.0-dev-20230424210540 — 2023-04-24
- … 411 more at https://npm.io/package/@chakra-ui/gatsby-plugin/versions

## README

# @chakra-ui/gatsby-plugin

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.

```sh
npm i @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion

# or

yarn add @chakra-ui/gatsby-plugin @chakra-ui/react @emotion/react @emotion/styled framer-motion
```

## Usage

1. Add `@chakra-ui/gatsby-plugin` as a plugin in your Gatsby config.

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

2. Use Chakra ⚡

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

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

export default IndexPage
```

## Plugin options

By default, this plugin adds the main context provider to make all components
work correctly.

- **ChakraProvider:** Your custom theme and all
  [ChakraProvider Props](https://chakra-ui.com/docs/getting-started#chakraprovider-props)
  are passed to this instance

```jsx
<ChakraProvider theme={theme} resetCSS={resetCSS} portalZIndex={portalZIndex}>
  {element}
</ChakraProvider>
```

You can disable either of these with Gatsby options:

```js
// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: "@chakra-ui/gatsby-plugin",
      options: {
        /**
         * @property {boolean} [resetCSS=true]
         * if `false`, this plugin will not use `<CSSReset />
         */
        resetCSS: 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/@chakra-ui/gatsby-plugin/theme.js` file with your own theme:

```js
// src/@chakra-ui/gatsby-plugin/theme.js
import { extendTheme } from "@chakra-ui/react"
const theme = {
  colors: {
    primary: "rebeccapurple",
  },
}

export default extendTheme(theme) // or extendBaseTheme
```

You can learn more about custom theme at
[Chakra UI's documentation](https://chakra-ui.com/theme).

By default, Chakra provides a sensible
[default theme](https://github.com/chakra-ui/chakra-ui/tree/main/packages/theme)
inspired by Tailwind CSS.

---
_Source: https://npm.io/package/@chakra-ui/gatsby-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._