50 Free Gatsby Themes & Templates [2021]

GatsbyJS is a React-based, GraphQL powered static site generator. It uses powerful preconfiguration to build a website that uses only static files for incredibly fast page loads, service workers, code splitting, server-side rendering, intelligent image loading, asset optimization, and data prefetching. All out of the box!

Learn more at the official site!

If you’re looking to build a web app with Gatsby. Here are 50 awesome (and free!) Gatsby themes to kick-off the project 🎉

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

See more details

2. 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

See more details

3. 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.

See more details

4. Gatsby Paradigm Shift

Single page responsive site that’s perfect for a personal portfolio or small showcase. Original design by HTML5 UP.

See more details

5. 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

See more details

6. Gatsby Theme Document

A Gatsby.js theme for creating documentation with MDX and Theme UI. Features multiple color modes and navigation that is created automatically.

See more details

7. Ginger

Ginger beautiful Gatsby and WPGraphQL WordPress theme for bloggers, photographers and any lifestyle professionals looking for an amazing theme that’s blazingly fast!

See more details

8. Gatsby Lander

An experimental Gatsby starter built using Tailwind CSS. This single page website template is perfect for getting an idea out the door. With Tailwind CSS, it’s very easy to customize the colors and styles of this landing page.

See more details

9. Gatsby Forty

A colorful website template featuring a landing page, two hero banner styles, and a generic page. Built using Gatsby.js and designed by HTML5 UP.

See more details

10. Gatsby Strata

This super simple site features a lightbox style photo gallery. Fully responsive and perfect for displaying your work. Designed by HTML5 UP.

See more details

11. Gatsby Stellar

A scroll friendly, responsive site. Supports single or multiple pages. Has smooth scrolling to the different sections of the page. Designed by HTML5 UP.

See more details

12. Gatsby Photon

Great single page site that can be a landing page or a portfolio website. Custom grid elements made with CSS Grid! Original design by HTML5 UP.

See more details

13. 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

See more details

14. 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
• SASS styling
• Gatsby version 2

See more details

15. Gatsby Material Kit React

Adaptation of Material Kit React to Gatsby.

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

See more details

16. 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

See more details

17. Gatsby Starter Theme

Polished Gatsby theme for a documentation site

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

See more details

18. 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

See more details

19. 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

See more details

20. Blog

A 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

See more details

21. Tabor

A slick portfolio and blog theme converted to a Gatsby theme.

See more details

22. Gatsby Kontent Paperbase

Material UI Paperbase Starter for Gatsby with Kentico Kontent.

See more details

23. DIY

DIY is a multi-page marketing theme with an advanced layout builder.

See more details

24. Azimuth

Azimuth is a sleek marketing theme for startup and product sites.

See more details

25. vHealth – Virtual healthcare

Modular and easy to use Gatsby template for a Healthcare Startup.

See more details

26. Gatsby Markdown Material TypeScript/TSX Responsive Blog Starter

Markdown Material UI TypeScript/TSX.

See more details

27. Gatsby DevBlog

A fully customizable blog template designed for developers (or anyone else) wanting to get into blogging.

See more details

28. Intro

Personal branding theme for developers.

See more details

29. Planty

Planty is an e-commerce ready theme powered by Snipcart.

See more details

30. Gatsby Novela

Welcome to Novela, the simplest way to start publishing with Gatsby.

See more details

31. Libris

Libris is a documentation theme.

See more details

32. Vanilla

A clean vanilla theme for Stackbit.

See more details

33. Fresh

Fresh is a personal theme with a blog for Stackbit.

See more details

34. Starter Stackbit

A developer-focused starter theme for Stackbit.

See more details

35. Fjord

Fjord is a beautiful, minimal blog theme.

See more details

36. Exto

Exto is portfolio and blog theme with a clean design.

See more details

37. Ampersand

Ampersand is a Medium inspired blogging theme.

See more details

38. Gatsby Prismic Starter Prist

Gatsby starter for portfolios and blogs using Prismic CMS.

See more details

39. Airtable listing theme for Gatsby

Gatsby starter theme integrated with Airtable.

See more details

40. Gatsby Contentful Blog and Portfolio

A Gatsby starter for a portfolio with a blog, using Contentful as the CMS.

See more details

41. Gatsby Starter for Scientists

A portfolio or lab website for Scientists built with Gatsby.

See more details

42. Gatsby Pocket

A Gatsby theme that adds a pocket to your website.

See more details

43. Gatsby Starter Fractal

Gatsby.js V2 starter template based on Fractal by HTML5 UP.

See more details

44. Gatsby Starter Nehalem

Out-of-the-box:

• Fully responsive
• Highly optimized (Lighthouse score ~400)
• SEO optimized (with open graph, Twitter Card, JSON-LD, RSS and sitemap)
• Syntax highlighting
• Search functionality
• Multi navigations
• Static pages
• Fully typed with TypeScript
• Tagging
• Theming
• Customizable

See more details

45. Bonneville

A simple, clean GatsbyJS starter for those looking to get up and running with Gatsby

See more details

46. Gatsby Starter Zenii

A one-page Gatsby starter built with Tailwindcss and Postcss.

See more details

47. Gatsby Starter Interviews

A responsive Gatsby starter for structured Q&A Interviews.

See more details

48. Gatsby Crafty Theme

A clean & minimal Gatsby theme!

See more details

49. Gatsby Starter Newage

Gatsby.js V2 starter template based on New Age by startbootstrap.

See more details

50. Gatsby All In

A GatsbyJs starter that includes the most popular js libraries, already pre-configured and ready for use.

See more details

Related Posts: