Skip to content
Get packs

Guide · Open source

How to use styled-components in React: setup and guide

Updated · written with AI from the project's own documentation and checked against our catalogue data

styled-components is an open-source TypeScript library that lets you attach CSS styles directly to React components. This guide explains what it covers, how to get started, and when it is a good fit. By the end you will know the prerequisites, the setup steps, and which alternatives to compare before you commit.

styled-componentsstyled-components/styled-components · ★ 41.1k · MIT

Quick start

  1. 1Check prerequisites. Confirm you have Node.js, a package manager such as npm, and React set up in your project.
  2. 2Get the source. Clone the repository with git clone https://github.com/styled-components/styled-components to see the code.
  3. 3Read the official docs. The README excerpt does not include usage syntax, so open https://styled-components.com for setup and examples.
  4. 4Add it to your project. Install the library with your package manager, following the official instructions for your setup.
  5. 5Style a component. Attach styles directly to a React component using the library's API as described in the documentation.
  6. 6Check your rendering setup. If you use server-side rendering or React Server Components, confirm the library's support for your setup in the docs.

What is styled-components?

styled-components is a TypeScript library for React. It lets you attach CSS styles directly to React components, so styles live close to the components they belong to.

According to its description, it supports server components, client components, streaming server-side rendering, and React Native through one API.

Who should use styled-components?

The project is aimed at a specific set of developers and teams. It fits best in the following cases.

  • React developers who prefer writing styles alongside components in JavaScript
  • Teams building apps that use server-side rendering or React Server Components
  • Projects that also target React Native and want one styling approach

What do you need before you start?

You need Node.js and a package manager such as npm. You also need React. The README excerpt does not confirm an exact Node.js or npm version, so check the official docs before you begin.

If you are new to React, learn the basics first. styled-components builds on React components, so it will be easier to follow once you understand them.

  • Node.js
  • A package manager such as npm
  • React

How do you get the source code?

The README shows how to clone the repository. Run the command below to get a local copy of the source.

The excerpt we reviewed is truncated and does not include the package install command or usage syntax. For those, use the official homepage at https://styled-components.com.

git clone https://github.com/styled-components/styled-components

When should you pick a different tool?

styled-components is not the right choice for every project. The README describes a CSS-in-JS approach, so a different tool may fit better if that approach does not suit you.

It is also a poor fit if you only need plain CSS or a utility-class system, if your project is not built with React or React Native, or if you are a beginner who has not yet learned React.

  • Plain CSS is enough for your project
  • You want a utility-class system
  • Your project is not React or React Native

What are the alternatives?

Several comparable projects solve the same styling problem in different ways. Compare them against your team's needs before choosing.

  • Emotion
  • Tailwind CSS
  • CSS Modules
  • Vanilla Extract

What people use it for

  • Styling React components with styles kept beside the component code
  • Building apps that use server-side rendering or React Server Components
  • Sharing one styling approach between a React web app and a React Native app

Frequently asked questions

Is styled-components free to use?

Yes. styled-components is released under the MIT licence, which is a permissive open-source licence. Check the repository's licence file for the full terms.

Does styled-components work with React Server Components?

According to its description, styled-components supports server components and client components. It also supports streaming server-side rendering. Check the official docs for setup details.

Does styled-components work with React Native?

Yes, according to its description, it supports React Native through the same API used for web React.

What do I need to install styled-components?

You need Node.js, a package manager such as npm, and React. The README excerpt does not confirm exact version requirements.

What are the alternatives to styled-components?

Comparable projects include Emotion, Tailwind CSS, CSS Modules, and Vanilla Extract. Each takes a different approach to styling React.

Is styled-components written in TypeScript?

Yes. The project is listed as written in TypeScript.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

styled-components suits React developers, and teams using server rendering or React Native, who want styles written alongside their components. Pick a different tool if you only need plain CSS, a utility-class system, or you are not building with React.

Install options & downloads