![50 Free Gatsby Themes & Templates [2021]](/images/uploads/gatsby-post-thumb.png)
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
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
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.
4. Gatsby Paradigm Shift
Single page responsive site that's perfect for a personal portfolio or small showcase. Original design by HTML5 UP.
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
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.
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!
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.
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.
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.
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.
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.
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
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
15. Gatsby Material Kit React
Adaptation of Material Kit React to Gatsby.
- 60 Handcrafted Components
- 4 Customized Plugins
- 3 Example Pages
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
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
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
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
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
21. Tabor
A slick portfolio and blog theme converted to a Gatsby theme.
22. Gatsby Kontent Paperbase
Material UI Paperbase Starter for Gatsby with Kentico Kontent.
23. DIY
DIY is a multi-page marketing theme with an advanced layout builder.
24. Azimuth
Azimuth is a sleek marketing theme for startup and product sites.
25. vHealth - Virtual healthcare
Modular and easy to use Gatsby template for a Healthcare Startup.
26. Gatsby Markdown Material TypeScript/TSX Responsive Blog Starter
Markdown Material UI TypeScript/TSX.
27. Gatsby DevBlog
A fully customizable blog template designed for developers (or anyone else) wanting to get into blogging.
28. Intro
Personal branding theme for developers.
29. Planty
Planty is an e-commerce ready theme powered by Snipcart.
30. Gatsby Novela
Welcome to Novela, the simplest way to start publishing with Gatsby.
31. Libris
Libris is a documentation theme.
32. Vanilla
A clean vanilla theme for Stackbit.
33. Fresh
Fresh is a personal theme with a blog for Stackbit.
34. Starter Stackbit
A developer-focused starter theme for Stackbit.
35. Fjord
Fjord is a beautiful, minimal blog theme.
36. Exto
Exto is portfolio and blog theme with a clean design.
37. Ampersand
Ampersand is a Medium inspired blogging theme.
38. Gatsby Prismic Starter Prist
Gatsby starter for portfolios and blogs using Prismic CMS.
39. Airtable listing theme for Gatsby
Gatsby starter theme integrated with Airtable.
40. Gatsby Contentful Blog and Portfolio
A Gatsby starter for a portfolio with a blog, using Contentful as the CMS.
41. Gatsby Starter for Scientists
A portfolio or lab website for Scientists built with Gatsby.
42. Gatsby Pocket
A Gatsby theme that adds a pocket to your website.
43. Gatsby Starter Fractal
Gatsby.js V2 starter template based on Fractal by HTML5 UP.
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
45. Bonneville
A simple, clean GatsbyJS starter for those looking to get up and running with Gatsby
46. Gatsby Starter Zenii
A one-page Gatsby starter built with Tailwindcss and Postcss.
47. Gatsby Starter Interviews
A responsive Gatsby starter for structured Q&A Interviews.
48. Gatsby Crafty Theme
A clean & minimal Gatsby theme!
49. Gatsby Starter Newage
Gatsby.js V2 starter template based on New Age by startbootstrap.
50. Gatsby All In
A GatsbyJs starter that includes the most popular js libraries, already pre-configured and ready for use.
Related Posts:
A little about me..
Hey, I’m Tim! 👋
I’m a freelance business owner, web developer & author. I teach both new and experienced freelancers how to build a sustainable and successful freelancing business. Check out my Complete Guide to Freelancing if you'd like to find out more.
While you're here, you can browse through my blogs where I post freelancing tips, code tutorials, design inspiration, useful tools & resources, and much more! You can also join the newsletter, or find me on X.
Thanks for reading! 🎉
