Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


A weather dashboard Gatsby theme powered by weather.gov.

gatsby-theme-weather screenshot


  • Geolocation-provided weather
  • Weather context state hook available for custom components - useWeather
  • Refresh interval for data fetching
  • Custom Notification system
  • Carbon Design System Iconography


To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    yarn add gatsby-theme-weather
  2. Add the theme to your gatsby-config.js:

    module.exports = {
      plugins: [
          resolve: 'gatsby-theme-weather',
  3. Start your site

    gatsby develop


Each piece of this theme is customizable, however it is important to note the Skeleton will be our core data layer component and should not be shadowed without careful consideration.


To customize the color theme, shadow gatsby-theme-weather/src/theme.js


This theme accepts a few options for functionality, as well as modifying the experience.

Option Value Type Default Value
refreshInterval Integer 20

Note: refreshInterval is expressed in minutes


Below is a table of available components to shadow and use as shortcodes in MDX.

Filename Component Name Type Description
ColorSwatch.js ColorSwatch Card component Displays current color palette
CurrentWeather.js CurrentWeather Card component Displays current weather in a card
CurrentTime.js CurrentTime Time component Displays current time (12-hour, 2-digit minute format)
w-icon.js WIcon Icon component Used to retrieve appropriate icon based on props.icon
Card.js Card { StyledCard } Card component Base card and named StyledCard export for wrapping



© 2023 Gatsby, Inc.