# Setup Emotion

[Emotion](https://emotion.sh/) is a powerful CSS-in-JS library that supports
both inline CSS styles and styled components. You can use each styling feature
individually or together in the same file.

This recipe:

---

Installs necessary NPM packages.

<NPMPackage name="gatsby-plugin-emotion" />
<NPMPackage name="@emotion/react" />
<NPMPackage name="@emotion/styled" />

---

Installs the Emotion plugin in gatsby-config.js

<GatsbyPlugin name="gatsby-plugin-emotion" />

---

Writes out an example page you can use to play
with Emotion.

<File
  path="src/pages/emotion-example.js"
  content="https://gist.githubusercontent.com/KyleAMathews/323bacd551df46e8e7b6146cbf827d0b/raw/5c60f168f30c505cff1ff2433e69dabe27ae9738/sample-emotion.js"
/>

---

Read more about Emotion on the official Emotion docs site:

https://emotion.sh/docs/introduction