styled-components Logo

Visual primitives for the component age.

Use the best bits of ES6 and CSS to style your apps without stress 💅🏾

Used by folks at

To create beautiful websites like these

Discover more
Stars on GitHubCurrent versionMonthly downloadsGzipped sizeDiscord

Getting started

Installation

To download styled-components run:

That's all you need to do, you are now ready to use it in your app! (yep, no build step needed 👌)

Note

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

Your first styled component

Let's say you want to create a simple and reusable <Button /> component that you can use throughout your application. There should be a normal version and a big and primary version for the important buttons. This is what it should look like when rendered: (this is a live example, click on them!)

First, let's import styled-components and create a styled.button:

This Button variable here is now a React component that you can use like any other React component! This unusual backtick syntax is a new JavaScript feature called a