# gatsby-plugin-styled-components

> Gatsby plugin to add support for styled components

Latest version **6.16.0** (published 2026-01-26) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-styled-components
pnpm add gatsby-plugin-styled-components
yarn add gatsby-plugin-styled-components
bun add gatsby-plugin-styled-components
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

## Facts

| | |
|---|---|
| Version | 6.16.0 |
| Published | 2026-01-26 |
| First published | 2017-05-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=18.0.0 <26 |
| Dependencies | 1 |
| Unpacked size | 45.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Guten Ye |
| Maintainers | pieh, kathmbeck, serhalp-netlify, mlgualtieri-gatsby, fk, tylerbarnes, daniellewgatsby |
| Keywords | gatsby, gatsby-plugin, styled-components |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-styled-components
- Repository: https://github.com/gatsbyjs/gatsby
- Homepage: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-styled-components#readme
- Issues: https://github.com/gatsbyjs/gatsby/issues
- npm.io page: https://npm.io/package/gatsby-plugin-styled-components

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.20.13

## Recent versions

- 6.16.0 (latest) — 2026-01-26
- 6.17.0-next.0 (next) — 2025-11-27
- 6.18.0-react19.1 (react19) — 2025-11-26
- 4.15.0 (latest-v3) — 2022-12-07
- 5.25.0 (latest-v4) — 2022-12-07
- 6.0.0-alpha-drupal-proxyurl.14 (drupal-proxyurl) — 2022-11-22
- 5.14.0-alpha-transformer-json.26 (alpha-transformer-json) — 2022-10-12
- 6.0.0-alpha-v5.d20221012t101120.57 (alpha-v5) — 2022-10-12
- 5.23.0-alpha-a5-peer.70 (alpha-a5-peer) — 2022-09-14
- 5.23.0-alpha-preview-gh-api.26 (preview-gh-api) — 2022-09-08
- 5.23.0-alpha-9689ff.25 (alpha-9689ff) — 2022-08-31
- 5.18.0-alpha-drupal-self-reference.18 (drupal-self-reference) — 2022-07-19
- 5.15.0-alpha-wp-image-cdn-auth.48 (wp-image-cdn-auth) — 2022-05-20
- 5.8.0-alpha-image-service.24 (image-service) — 2022-02-10
- 5.6.0-alpha-ts-jit.60 (alpha-ts-jit) — 2022-01-21
- … 384 more at https://npm.io/package/gatsby-plugin-styled-components/versions

## README

# gatsby-plugin-styled-components

A [Gatsby](https://github.com/gatsbyjs/gatsby) plugin for
[styled-components](https://github.com/styled-components/styled-components) with
built-in server-side rendering support.

## Install

```shell
npm install gatsby-plugin-styled-components styled-components babel-plugin-styled-components
```

## How to use

Edit `gatsby-config.js`

```javascript
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-styled-components`,
      options: {
        // Add any options here
      },
    },
  ],
}
```

## Options

You can pass options to the plugin, see the [Styled Components docs](https://styled-components.com/docs/tooling#babel-plugin) for a full list of options.

For example, to disable the `displayName` option:

```js
options: {
  displayName: false
}
```

Note: The `ssr` option will be ignored. Gatsby will apply it automatically when needed.

### Disabling vendor prefixing

If you don't require vendor prefixes for adding legacy CSS properties then this can be disabled by supplying the `disableVendorPrefixes` option:

```js
options: {
  disableVendorPrefixes: true
}
```

---
_Source: https://npm.io/package/gatsby-plugin-styled-components · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._