1. home
  2. blog
  3. about gatsby functional themes

About Gatsby Functional Themes

May 17, 2021

What is Gatsby Themes?

Theme is an absctract layer of site functionality in a npm package(and yes, this is why starters are not themes). It may include: design, data sourcing and functionality. For instance, design themes you can find on this site, they also called “templates”. And they may include data sourcing functionality, like built-in headless CMS support, for example.

How themes different from starters?

For contrary, starters are pre-defined sites. Starters may include all of above features, and they can even have design, but they serving different purpose - to quickly start a project. Main disadvantage of this approach is inflexibility. Many starters bloated with functionality you didn’t want, or vice verca, they lack of it. You can find a lot of abandoned starters that are just forks of official and mainstream ones, but with added simple feature or support of some new fancy headless cms.

To resolve this problem GatsbyJS developers created themes concept. Using them gives you ability to add only what you need, no more, no less. Basicly, themes is a type of a plugin.

Wait, plugin? So what the difference between plugin and theme?

Extended customization, in particular - component shadowing.

For more information about difference between starters, plugins and themes, you can visit official docs

And in this article we will show you some examples of functional themes.

Functional Themes

So functional themes do the only one thing - bringing functionality to your site. Now let’s check them out!

Gatsby Theme Waves

This is in fact the most fascinating example of functional themes, since it changing not only the way we write guides or tell stories, but also how end users interact with them. Just take a look at code guide example:

gatsby waves demo

For more, see live demo and documentation

This theme is experimental, but worth a try.

Gatsby Theme Firebase

Firebase theme implements one simple, but yet one of the most trickest part of all sites - authentification


With this theme, you can setup authentification on your site literally in minutes. For installation guide, look here

Gatsby Theme Apollo

Don’t confuse this with gatsby-theme-apollo-docs

Example of using:

// src/gatsby-theme-apollo/client.js
import fetch from 'isomorphic-fetch';
import {ApolloClient, HttpLink, InMemoryCache} from '@apollo/client';

const client = new ApolloClient({
  cache: new InMemoryCache(),
  link: new HttpLink({
    uri: 'https://api.spacex.land/graphql/',

export default client;

It adds Apollo GraphQL client to your site, which you will need for creating hybrid gatsby sites(making requests from your static site to some backend). You can check official installation guide

Gatsby Theme Slideshow


This theme implements, literally, the slideshow. Check this demo Perfect for converting some part or even whole site to slideshow, with slides created using mdx. Sadly, it now has only one transition effect - sliding, but this may change in the future(and you can do this, too!). To see full description and installation instructions, click here

Final thoughts

Gatsby made wonderful work by creating themes concept, and it has a lot of potential. All these themes it’s just a beginning of really powerful ecosystem.

Subscribe for updates

Join 100+ subscribers and get news about
themes, releases and special offers

Relative posts:

Gatsby Documentation ThemesGatsby Blog ThemesGatsby Portfolio ThemesGatsby Landing ThemesGatsby Free ThemesGatsby Premium ThemesGatsby Starters
Free and premium gatsby themes.
Copyright © 2019-2022 GatsbyTemplates.io. By using this site, you’re agreeing to our Terms of Service and Privacy Policy. We are listing free and premium templates. Terms of Service and technical support only applies to premium templates that were made by GatsbyTemplates team.