Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Gatsby plugin for otion, the atomic CSS-in-JS library.


  1. Install the plugin and its peer dependencies with a package manager of choice, e.g.:

    npm install gatsby-plugin-otion otion react-otion
  2. Add the newly installed plugin to gatsby-config.js, as shown through an example project:

    module.exports = {
      plugins: ["gatsby-plugin-otion"]


Additional configuration can be specified through shadowing:

/* src/gatsby-plugin-otion/options.js */

import { prefix as stylisPrefix } from "stylis"; // v4

export default {
  // Use a custom auto-prefixer, despite weighing more than the default
  prefix: (property, value) => {
    const declaration = `${property}:${value};`;
    return (
      // The trailing `;` is removed for cleaner results
      stylisPrefix(declaration, property.length).slice(0, -1)

Unfortunately, Gatsby plugin options cannot be used at this time, as function parameters are not supported.

© 2023 Gatsby, Inc.