Back to Gatsby

Setup Gatsby with Chakra UI

deprecated-packages/gatsby-recipes/recipes/chakra-ui.mdx

2.20.01.2 KB
Original Source

Setup Gatsby with Chakra UI

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

This recipes sets up and configures @chakra-ui/gatsby-plugin by installing it's dependencies and shadowing theme.js file to create a custom theme.


Installs necessary NPM packages

<NPMPackage name="framer-motion" /> <NPMPackage name="@emotion/styled" /> <NPMPackage name="@emotion/react" /> <NPMPackage name="@chakra-ui/react" /> <NPMPackage name="@chakra-ui/gatsby-plugin" />

Installs @chakra-ui/gatsby-plugin in gatsby-config.js

<GatsbyPlugin name="@chakra-ui/gatsby-plugin" />

Creates @chakra-ui/gatsby-plugin theme.js file so you can customize your own global styles

<GatsbyShadowFile theme="@chakra-ui/gatsby-plugin" path="src/theme.js" />

Once you've installed this recipe, you're ready to get started!