14 Best Free Gatsby WordPress Themes & Templates (gatsby.js 2023)

Updated: Jan 03, 2023 By: Dessign Team

Best Free Gatsby WordPress Themes & Templates

Collection of Best free gatsby.js themes and how to use them to build super fast site. Gatsby is all about speed building website with React.js framework. 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. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project! If you need to Export WordPress content to Gatsby there is a great plugin you can use Export WordPress Content to Gatsby

What to Look for in a Free Business Theme?

  1. Bootstrap 4 grid and media (UI / UX Optimized)
  2. Fully customized and well coded
  3. Fully Responsive (Mobile Friendly) & SEO optimized
  4. Lightweight and highly extendable
  5. JSON-LD Schema

Gatsby themes allow Gatsby site functionality to be packaged as a standalone product for others (and yourself!) to easily reuse. Using a traditional starter, all of your default configuration lives directly in your site. Using a theme, all of your default configurations lives in an npm package. Also read Sourcing From WordPress and how to setup all. If you interested in learning more about WordPress & Gatsby I recommend this online course “Headless WordPress w Gatsby.js”

Free Gatsby.js Themes and Templates to build super-fast website!

1. LekoArts Cara

leko arts

Playful and Colorful One-Page portfolio featuring Parallax effects and animations. Especially designers and/or photographers will love this theme! Built with MDX and Theme UI.

  • React Spring Parallax effects
  • Theme UI-based theming
  • CSS Animations and shapes
  • Light/Dark mode

2. JugglerX

juggler X

Multi page/content-type starter using Markdown and SCSS. Serif is a beautiful small business theme for Gatsby. The theme is fully responsive, blazing fast and artfully illustrated.

  • Graphql query in `gatsby-node.js` using aliases that creates pages and templates by content type based on the folder `src/pages/services`, `src/pages/team`
  • SCSS
  • Responsive design
  • Bootstrap 4 grid and media queries only
  • Responsive menu
  • Royalty free illustrations included
  • SEO titles & meta using `gatsby-plugin-react-helmet`
  • Eslint & Prettier

3. Portfolio Starter Jodie

portfolio jodie

Image-heavy photography portfolio with colorful accents & great typography

  • Configurable with theming, CSS Grid & a yaml file for navigation
  • Create your projects by editing a yaml file and putting images into a folder
  • Shows your Instagram posts
  • TypeScript
  • Cypress for End-to-End testing
  • react-spring for animations & transitions
  • Uses styled-components + styled-system
  • SEO with Sitemap, Schema.org JSONLD, Tags
  • Responsive images with gatsby-image

4. Ginger


Ginger beautiful Gatsby and WPGraphQL WordPress theme for bloggers, photographers and any lifestyle professionals looking for amazing and fast theme. Y

5. Dimension


A fully responsive, single page React.js website template. Built using Gatsby.js and designed by HTML5 UP. Great for a quick profile or portfolio site.

6. Ghost & Gatsby

ghost and gatsby

Build lightning-fast, modern publications with Ghost and Gatsby

  • Ghost integration with ready to go placeholder content and webhooks support
  • Minimal responsive design
  • Pagination for posts, tags, and authors
  • SEO Friendly Meta
  • JSON-LD Schema
  • OpenGraph structured data
  • Twitter Cards meta
  • Sitemap Generation
  • XML Sitemaps
  • Progressive Web App
  • Offline Support

7. Gatsby Netlify


Gatsby starter using Netlify CMS

  • Example of a website for a local developer meetup group
  • NetlifyCMS used for easy data entry
  • Mobile-friendly design
  • Styling done with Sass
  • Gatsby version 2

8. Gatsby Material Kit React

material kit react

Adaptation of Material Kit React to Gatsby

  • 60 Handcrafted Components
  • 4 Customized Plugins
  • 3 Example Pages

9. Blogger


A Simple, clean and modern designed blog with firebase authentication feature and easily customizable code.

  • Minimal and clean white layout.
  • Dynamic content from Contentful.
  • Blog post listing with previews (image + summary) for each blog post.
  • Disqus commenting system for each blog post.
  • Search post with keyword.
  • Firebase for Authentication.
  • Protected Routes with Authorization.
  • Contact form integration.

10. Gatsby Starter Theme

Gatsby Starter Theme

Polished Gatsby theme for documentation site

  • ⚛ Prerendered static site
  • ? Internationalization support by i18next
  • ? Markdown-based documentation and menus
  • ? Examples with live playground
  • ? Unified Theme and Layout
  • ? Easy customized header nav
  • ? Built-in home page components

11. London Portfolio Template

london portfolio

A custom, image-centric theme for Gatsby.

  • Post thumbnails in the homepage
  • Built with PostCSS
  • Made for image-centeric portfolios
  • Based on London for Ghost

12. Gatsby Portfolio

gatsby portfolio

Clean gird based Gatsby portfolio theme, with left side navigation and infinite scrolling.

  • Simple portfolio to quick start a site with DatoCMS
  • Contents and media from DatoCMS
  • Custom Sass style
  • SEO

13. Blog


Blog with all the Bells and Whistles

  • Write blog posts into Markdown files (easy to format and content will not be married to any platform).
  • Expandable
  • Responsive and streamlined design.
  • Blazing fast UX
  • Autogenerated tracedSVG image placeholders are stylized to create a smooth look and transition as the image loads without the page jumping around.
  • Posts organized by tags.
  • Teasers of posts are generated to front page with infinite scroll which gracefully degrades into pagination.
  • Allow readers to be notified of updates with RSS feed and email newsletter.
  • Contact Form.

14. Tabor


A slick portfolio and blog theme converted to a Gatsby theme. Or you can download directly from Github

The best free Gatsby WordPress themes are: LekoArts Cara, JugglerX, Ginger, Dimension, Ghost & Gatsby, Gatsby Netlify, Gatsby Material Kit React, Gatsby Starter Theme, Tabor

Ginger. Ginger beautiful Gatsby and WPGraphQL WordPress theme for bloggers, photographers and any lifestyle professionals looking for amazing and fast theme. 

Gatsby is a free and open source framework based on React that helps developers build blazing fast websites and apps

There are two main ways to get started with Gatsby:

  1. Tutorial: Step-by-step instructions on how to install Gatsby and start a project: written for people without Gatsby or web development experience, though these learning resources have helped developers of all skill levels.
  2. Quick start: One page summary of how to install Gatsby and start a new project.
  1. Install the Gatsby CLI. Copy. npm install -g gatsby-cli.
  2. Create a new site. Copy. gatsby new gatsby-site.
  3. Change directories into site folder. Copy. cd gatsby-site.
  4. Start development server. Copy. gatsby develop.
  5. Create a production build. Copy. gatsby build.
  6. Serve the production build locally. Copy. gatsby serve.