Visual primitives for the component age πŸ’…
JavaScript TypeScript HTML
Latest commit 67efeb6 Sep 20, 2017 @mxstbr mxstbr committed on GitHub Merge pull request #1139 from devrelm/devrelm/string-dom-tags
[TypeScript] Allow dom tag strings to be passed to the `styled` method
Failed to load latest commit information.
.github Update ISSUE_TEMPLATE Jul 5, 2017
docs Fix for a broken link in a doc file. Jun 12, 2017
example removing old ssr example Apr 14, 2017
flow-typed Remove unused autoprefixing code and inline-style-prefixer Jun 7, 2017
native Add withTheme definition Feb 20, 2017
primitives move usage of StyleSheet to function level Jun 11, 2017
src Add Marquee tag to default attributes list Sep 17, 2017
typings allow dom tag strings to be passed to 'styled' Sep 18, 2017
.babelrc Switch to babel-preset-env in loose mode Apr 20, 2017
.editorconfig Add editorconfig (#30) Sep 30, 2016
.eslintignore Fix lint errors from new rules Dec 18, 2016
.eslintrc refactor: add a util to grab the webpack nonce magic string Sep 7, 2017
.flowconfig fix flow Jun 11, 2017
.gitignore Revert "Add benchmarking" Feb 14, 2017
.jest.native.json Add some initial tests for StyledNativeComponent Apr 22, 2017
.jest.primitives.json create jest config for primitives Jun 11, 2017
.travis.yml chore: test node 8 in travis Sep 12, 2017 Adds PR to un-released in CHANGELOG Sep 17, 2017 Update Jul 4, 2017 Fix typo in contributing docs clone URL May 29, 2017
LICENSE Add first README update Sep 29, 2016 Update styled-props demos url Sep 9, 2017
appveyor.yml Fixed ci config Jan 20, 2017
dangerfile.js chore: fix danger logic for if tests are included with lib changes Jul 22, 2017
no-parser.js Merge branch 'v2' into v2-jest Apr 7, 2017
package.json chore: adjust mocking strategy to avoid a flow error Sep 7, 2017
rollup.config.js Replace process env only in prod Sep 6, 2017
tslint.json Update TSLint and add default rules file Jan 20, 2017
yarn.lock fix(1127) - Excessive warnings while running tests Sep 5, 2017


Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress πŸ’…

npm install --save styled-components

npm Join the community on Spectrum

gzip size size module formats: umd, cjs, esm

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, 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 npm as your package manager, aren't using a module bundler or aren't sure about either of those jump to Alternative Installation Methods.

Made by Glen Maddern, Max Stoiber and Phil PlΓΌckthun, supported by Front End Center and Thinkmill. Thank you for making this project possible!


See the documentation at for more information about using styled-components!


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!

Recording of stylelint correctly reporting errors in a styled components' CSS

See the stylelint-processor-styled-components repository for installation instructions.

Syntax highlighting

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:

Syntax highlighted styled component


@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 language-babel package for your JavaScript files!

Sublime Text

There is an open PR by @garetmckinley to add support for styled-components to 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 babel-sublime to highlight your JavaScript files!

Visual Studio Code

@gandm's language-babel has been ported to VSCode under the name Babel JavaScript by Michael McDermott. It provides the same all-in-one solution for Babel syntax highlighting with styled-components included.

If you would like to keep your current JavaScript syntax highlighting, you can use the vscode-styled-components extension to provide styled-components syntax highlighting inside your Javascript files. You can install it as usual from the Marketplace.

VIM / NeoVim

The vim-styled-components plugin gives you syntax highlighting inside your Javascript files. Install it with your usual plugin manager like Plug, Vundle, Pathogen, etc.

Also if you're looking for an awesome javascript syntax package you can never go wrong with YAJS.vim.

WebStorm, IntelliJ IDEA, PhpStorm, PyCharm, and RubyMine

The webstorm-styled-components plugin adds code completion and highlighting for CSS properties and values in the template strings. And it also provides code completion and navigation for JavaScript symbols in the interpolations. You can install it from the IDE: go to Preferences | Plugins and search for Styled Components.

Other Editors

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.

Built with styled-components


Grid Systems


  • styled-props: Simple lib that allows you to set styled props in your styled-components without stress (demos)
  • styled-components-breakpoint: Utility function for using breakpoints with styled-components.
  • styled-theme: Extensible theming system for styled-components.
  • styled-tools: Useful interpolated functions for styled-components.
  • styled-ax: Functional theme property accessor(s)
  • react-create-component-from-tag-prop: Create a react component from a tag prop. Lets your users to choose which HTML elements get styled by your πŸ’… styled-components.
  • styled-components-theme: A library for refering to theme colors and modifying them inline. e.g. color: ${primary.lighten(0.3)};
  • styled-map: Super simple lib to map props to styles with styled-components
  • styled-system: Design system utilities for styled-components – used in grid-styled and Rebass (demo)
  • styled-shortcuts: Use simple string notation to access props. No functions necessary! Example: font-size: ${'theme.fontSize:px'}; (demo)
  • styled-shortcut-components: A convenience package that wraps styled-components with styled-shortcuts.
  • styled-media-query: Easily and beautifully use media queries with styled-component with custom breakpoints
  • styled-by: Simple and powerful lib to handle styled props in your components (demo)




Built something with styled-components? Submit a PR and add it to this list!

Further Reading

These are some great articles and talks about related topics in case you're hungry for more:

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

To install styled-components with bower you'd do:

bower install styled-components=

To use it from your HTML, add this at the bottom of your index.html, and you'll have access to the global window.styled variable:

<script src="" type="text/javascript"></script>

Other solutions

If styled-components isn't quite what you're looking for, maybe something in this list is:

  • glamorous - basically styled-components but 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.