Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
npm i styled-components
yarn add styled-components
styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
styled-components is compatible with both React (for web) and ReactNative – meaning it's the perfect choice even for truly universal apps! See the documentation about ReactNative for more information.
Note: If you're not using
npmas your package manager, aren't using a module bundler or aren't sure about either of those jump to Alternative Installation Methods.
See the documentation at styled-components.com/docs for more information about using
Quicklinks to some of the most-visited pages:
There is (currently experimental) support for
stylelint – meaning you can take advantage of 150 rules to make sure your
styled-components CSS is solid!
stylelint-processor-styled-components repository for installation instructions.
The one thing you lose when writing CSS in template literals is syntax highlighting. We're working hard on making proper syntax highlighting happening in all editors. We currently have support for Atom, Visual Studio Code, WebStorm, and soon Sublime Text.
This is what it looks like when properly highlighted:
@gandm, the creator of
language-babel, has added support for
styled-components in Atom!
To get proper syntax highlighting, all you have to do is install and use the
There is an open PR by @garetmckinley to add support for
babel-sublime! (if you want the PR to land, feel free to 👍 the initial comment to let the maintainers know there's a need for this!)
As soon as that PR is merged and a new version released, all you'll have to do is install and use
Visual Studio Code
VIM / NeoVim
WebStorm, IntelliJ IDEA, PhpStorm, PyCharm, and RubyMine
Preferences | Plugins and search for
We could use your help to get syntax highlighting support to other editors! If you want to start working on syntax highlighting for your editor, open an issue to let us know.
Code completions and error reporting
A lot of hard work goes into community libraries, projects, and guides. A lot of them make it easier to get started or help you with your next project! There’s also a whole lot of interesting apps and sites that people have built using styled-components.
Make sure to head over to awesome-styled-components to see them all! And please contribute and add your own work to the list so others can find it.
Alternative Installation Methods
If you're not using a module bundler or not using
npm as your package manager, we also have a global ("UMD") build!
You can use that via the
unpkg CDN to get
styled-components, the URL is
styled-components with bower you'd do:
bower install styled-components=https://unpkg.com/styled-components/dist/styled-components.min.js
To use it from your HTML, add this at the bottom of your
index.html, and you'll have access to the global
styled-components isn't quite what you're looking for, maybe something in this list is:
styled-componentsbut using JS objects and functions instead of strings.
Licensed under the MIT License, Copyright © 2017 Glen Maddern and Maximilian Stoiber.
See LICENSE for more information.
This project builds on a long line of earlier work by clever folks all around the world. We'd like to thank Charlie Somerville, Nik Graf, Sunil Pai, Michael Chan, Andrey Popp, Jed Watson & Andrey Sitnik who contributed ideas, code or inspiration.
Special thanks to @okonet for the fantastic logo.