# Setup Theme UI

This recipe helps you start developing with the [Theme UI](https://theme-ui.com) styling library.

<Config name="gatsbyjs/add-theme-ui" />

This recipe:

---

Installs packages.

<NPMPackage name="theme-ui" />
<NPMPackage name="gatsby-plugin-theme-ui" />
<NPMPackage name="@theme-ui/presets" />

---

Adds the plugin `gatsby-plugin-theme-ui` to your `gatsby-config.js`.

<GatsbyPlugin name="gatsby-plugin-theme-ui" />

---

Writes out Theme UI configuration files.

<File
  path="src/gatsby-plugin-theme-ui/index.js"
  content="https://gist.github.com/KyleAMathews/ab59e200e4f8a1b4109dddb51b2140f9/raw/209a2e7c589766869522b12f7f6cecaf3f7a6f81/index.js"
/>

<File
  content="export default {}"
  path="src/gatsby-plugin-theme-ui/components.js"
/>

---

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

- Read the docs: https://theme-ui.com
- Learn about the theme specification: https://system-ui.com

*note:* if you're running this recipe on the default starter (or any other starter with
base css), you'll need to remove the require to `layout.css` in the `components/layout.js` file
as otherwise they'll override some theme-ui styles.