See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub


Build Status twitter version MIT License

Provides drop-in support for Aphrodite in Gatsby.


yarn add aphrodite gatsby-plugin-aphrodite


npm install --save aphrodite gatsby-plugin-aphrodite

How to use

Add the plugin to the plugins array in your gatsby-config.js:


plugins: ['gatsby-plugin-aphrodite']

then use aphrodite in your component files:

// SomeComponent.js

import { StyleSheet, css } from 'aphrodite'

const styles = StyleSheet.create({ message: { color: 'red' } })

const SomeComponent = () => (
  <div className={css(styles.message)}>Hello World</div>

export default SomeComponent


MIT © Ben Williams

© 2022 Gatsby, Inc.