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

Updated: Jan 03, 2023 By: Dessign Team

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

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

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

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

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

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

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

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

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