# Setup Styled Components

[Styled Components](https://styled-components.com/) is visual primitives for the component age.
Use the best bits of ES6 and CSS to style your apps without stress 💅

This recipe:

---

Installs necessary NPM packages.

<NPMPackage name="gatsby-plugin-styled-components" />
<NPMPackage name="styled-components" />
<NPMPackage name="babel-plugin-styled-components" />

---

Installs the Styled Components plugin in `gatsby-config.js`.

<GatsbyPlugin name="gatsby-plugin-styled-components" />

---

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

<File
  path="src/pages/styled-components-example.js"
  content="https://gist.githubusercontent.com/KyleAMathews/34541b87c4194ba2290eedbe8a0b1fe0/raw/dba4d3ffecb5f2a3a36e0e017387185a9835c685/styled-components-example.js"
/>

---

Read more about Styled Components on the official docs site:

https://styled-components.com/