# Setup Gatsby with Chakra UI

[Chakra UI](https://chakra-ui.com/) provides a set of accessible, reusable, and composable React components that make it super easy to create websites and apps.

This recipes sets up and configures [@chakra-ui/gatsby-plugin](https://www.gatsbyjs.com/plugins/@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="@emotion/react" />
<NPMPackage name="@emotion/styled" />
<NPMPackage name="@chakra-ui/react" />
<NPMPackage name="framer-motion" />
<NPMPackage name="@chakra-ui/gatsby-plugin />

---

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

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

---

## Shadows @chakra-ui/gatsby-plugin `theme.js` file so you can create a custom theme

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

- [Learn how to extend theme defaults with your custom theme](https://chakra-ui.com/docs/theming/customize-theme)

---

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

- [Learn more about plugin options](https://chakra-ui.com/guides/integrations/with-gatsby)
- [Read more about Chakra UI on the official Chakra docs site](https://chakra-ui.com/getting-started)