Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A joy-ui gatsby theme plugin with plug and play functionality. Simply install this plugin to your gatsby project and you are ready to go.


For far too long, there have been themes that just require you to figure it out yourself. gatsby-theme-joy-ui is designed to help alleviate those concerns and has been carefully crafted to help beginners with Gatsby & Joy-UI


  1. Install gatsby-theme-joy-ui with npm or yarn within your gatsby site alongside of @mui/joy
  npm install gatsby-theme-joy-ui @mui/joy
  1. Configure your theme within the gatsby-config(.js|.ts) file of your project
module.exports = {
  plugins: {
    resolve: `gatsby-theme-joy-ui`,
    options: {
      //configure your options here. Leave blank if there are none

Configuration Options

Note: If you do not know how to configure theme options, refer to this guide -> theme-api congiuration

Setting Up A Custom Font

  1. Refer to gatsby-plugin-webfonts for up to date configuration options
  2. Create your custom font configuration within the gatsby-theme-joy-ui.webFontsConfig configuration property in gatsby-config.js Example:
    fonts: {
      google: [
          family: `Roboto`, // your font name here
          variants: [`300`, `400`, `500`],

Configuring Emotion

  1. Refer to gatsby-plugin-emotion for up to date configuration options
  2. Create your custom emotion configuration within the gatsby-theme-joy-ui.emotionPluginConfig configuration property in gatsby-config.js Example:
        // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin.
        // The values for each key in this example are the defaults the plugin uses.
        sourceMap: true,
        autoLabel: "dev-only",
        labelFormat: `[local]`,
        cssPropOptimization: true,



Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project’s code of conduct.

Running Tests

To run tests, run the following command

  npm run test


If you see any issues such as missing features/bugs, please refer to gatsby-joy-ui-theme’s issue page

Inspired From


© 2023 Gatsby, Inc.