with npm

Installation

Installing styled-components only takes a single command and you're ready to roll:

# with npm
npm install styled-components

# with yarn
yarn add styled-components

If you use a package manager like yarn that supports the "resolutions" package.json field, we also highly recommend you add an entry to it as well corresponding to the major version range. This helps avoid an entire class of problems that arise from multiple versions of styled-components being installed in your project.

In package.json:

{
  "resolutions": {
    "styled-components": "^6"
  }
}

It's highly recommended (but not required) to also use the Babel plugin. It offers many benefits like more legible class names, server-side rendering compatibility, smaller bundles, and more.

If you're not using a module bundler or package manager we also have a global ("UMD") build hosted on the unpkg CDN. Simply add the following <script> tag to the bottom of your HTML file:

<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>

Once you've added styled-components you will have access to the global window.styled variable.

const Component = window.styled.div`
  color: red;
`

This style of usage requires React CDN bundles and the react-is CDN bundle to be on the page as well (before the styled-components script.) See React's CDN documentation for details.