ContextQMD
Back to Gatsby

Setup Theme UI

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

2.20.01.1 KB
Original Source

Setup Theme UI

This recipe helps you start developing with the Theme UI 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!

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.