Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


npm version

Provides easy drop-in support for @artsy/fresnel in Gatsby.


yarn add gatsby-plugin-fresnel

How to use

Add the plugin to your gatsby-config.js and configure (see fresnel’s config API):

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-fresnel`,
      options: {
        breakpoints: {
          sm: 0,
          md: 768,
          lg: 1024,
          xl: 1192,

This package exposes a pre-configured Media component for creating media queries:

import React from 'react';
import { Media } from 'gatsby-plugin-fresnel';

const Home = () => (
    <Media at="sm">
      <MobileApp />
    <Media at="md">
      <TabletApp />
    <Media greaterThanOrEqual="lg">
      <DesktopApp />

See the @artsy/fresnel README for full documentation.

⚠️ Render behavior

Note that this plugin utilizes the disableDynamicMediaQueries option from @artsy/fresnel to mitigate hydration mismatch errors introduced in React 18. As a result, all children of Media components will be rendered regardless of visibility.

For more information, refer to @artsy/fresnel’s README section.

© 2023 Gatsby, Inc.