What is theme file structure in gatsby?

What are Gatsby themes?

Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. Gatsby themes are separate sites that are put together to split up large, complex projects.

Theme file structure

Theme file structure refers to the directory of the the built-in and user-defined themes. These themes can be created by the users themselves. Users are also able to inspect this file structure. These file structures are mostly used to find directories and file paths when it comes to theme shadowing. Below is an example of the theme file structure of a gatsby-theme-blog.

gatsby-theme-blog

├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
└── src
    ├── components
    │   ├── bio-content.js
    │   ├── bio.js
    │   ├── header.js
    │   ├── home-footer.js
    │   ├── layout.js
    │   ├── post-date.js
    │   ├── post-footer.js
    │   ├── post-hero.js
    │   ├── post-link.js
    │   ├── post-list.js
    │   ├── post-title.js
    │   ├── post.js
    │   ├── posts.js
    │   └── seo.js
    ├── gatsby-plugin-theme-ui
    │   └── components.js
    └── gatsby-theme-blog-core
       └── components
          ├── post.js
          └── posts.js

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved