npmpackage.info

Gathering detailed insights and metrics for styled-components

Other packages similar to styled-components

babel-plugin-styled-components

2.1.4

Improve the debugging experience and add server-side rendering support to styled-components

@types/styled-components

5.1.34

TypeScript definitions for styled-components

@xstyled/styled-components

4.0.0

A utility-first CSS-in-JS framework built for React (styled-components bindings).

stylelint-config-styled-components

0.1.1

A shareable stylelint config for stylelint-processor-styled-components

Gathering detailed insights and metrics for styled-components

styled-components - 6.1.19 | npmpackage.info

styled-components

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

6.1.19

40,844

MIT

TypeScript

1.69 MB

1,286,729,898 4.3

Installations

npm install styled-components

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS, UMD

Min. Node Version

>= 16

Node Version

20.19.2

NPM Version

10.8.2 Pull Requests

Open

24

Total

1,342

Closed

352

Merged

966

Issues

Open

297

Total

2,948

Closed

2,651

Releases

176

styled-components@6.1.19

Updated on Jun 12, 2025

styled-components@6.1.18

Updated on May 08, 2025

styled-components@6.1.17

Updated on Apr 02, 2025

styled-components@6.1.16

Updated on Mar 17, 2025

styled-components@6.1.15

Updated on Feb 05, 2025

styled-components@6.1.14

Updated on Jan 04, 2025

View All 176 releases

Languages

TypeScript

JavaScript

CSS

HTML

TypeScript (85.73%)

JavaScript (14.03%)

CSS (0.15%)

HTML (0.09%)

Developer

styled-components

Download Statistics

Total Downloads

1,286,729,898

Last Day

1,254,190

Last Week

6,872,874

Last Month

32,409,775

Last Year

303,582,192

GitHub Statistics

MIT License

40,844 Stars

3,654 Commits

2,510 Forks

345 Watchers

20 Branches

375 Contributors

Updated on Jul 11, 2025

Sponsor this package

https://opencollective.com/styled-components

Maintainers

View All 375 Contributors

Package Meta Information

Latest Version

6.1.19

Package Id

styled-components@6.1.19

Unpacked Size

1.69 MB

Size

437.07 kB

File Count

211

NPM Version

10.8.2

Node Version

20.19.2

Published on

Jun 12, 2025

Total Downloads

Cumulative downloads

Total Downloads

1,286,729,898

Last Day

-1.8%

1,254,190

Compared to previous day

Last Week

-7.2%

6,872,874

Compared to previous week

Last Month

9.4%

32,409,775

Compared to previous month

Last Year

0.7%

303,582,192

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

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

Upgrading from v5? See the migration guide.

Utilizing tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allow 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!

1const Button = styled.button`
2  color: grey;
3`;

Alternatively, you may use style objects. This allows for easy porting of CSS from inline styles, while still supporting the more advanced styled-components capabilities like component selectors and media queries.

1const Button = styled.button({
2  color: 'grey',
3});

Equivalent to:

1const Button = styled.button`
2  color: grey;
3`;

styled-components is compatible with both React (for web) and React Native – meaning it's the perfect choice even for truly universal apps! See the documentation about React Native for more information.

Supported by Front End Center. Thank you for making this possible!

Docs

See the documentation at styled-components.com/docs for more information about using styled-components!

Quicklinks to some of the most-visited pages:

Example

1import React from 'react';
2
3import styled from 'styled-components';
4
5// Create a <Title> react component that renders an <h1> which is
6// centered, palevioletred and sized at 1.5em
7const Title = styled.h1`
8  font-size: 1.5em;
9  text-align: center;
10  color: palevioletred;
11`;
12
13// Create a <Wrapper> react component that renders a <section> with
14// some padding and a papayawhip background
15const Wrapper = styled.section`
16  padding: 4em;
17  background: papayawhip;
18`;
19
20function MyUI() {
21  return (
22    // Use them like any other React component – except they're styled!
23    <Wrapper>
24      <Title>Hello World, this is my first styled component!</Title>
25    </Wrapper>
26  );
27}

This is what you'll see in your browser:

Screenshot of the above code ran in a browser

Looking for v5?

The main branch is for the most-current version of styled-components, currently v6. For changes targeting v5, please point your PRs at the legacy-v5 branch.

Built with `styled-components`

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 are 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.

Contributing

If you want to contribute to styled-components please see our contributing and community guidelines, they'll help you get set up locally and explain the whole process.

Please also note that all repositories under the styled-components organization follow our Code of Conduct, make sure to review and follow it.

Badge

Let everyone know you're using styled-components →

1[![style: styled-components](https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg?colorB=daa357&colorA=db748e)](https://github.com/styled-components/styled-components)

Contributors

This project exists thanks to all the people who contribute. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

License

See LICENSE for more information.

Acknowledgements

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.

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

9

SAST

Determines if the project uses static code analysis.

5

Maintained

Determines if the project is "actively maintained".

4

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:46: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:57: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/codeql-analysis.yml:71: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/codeql-analysis.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/release.yml:21: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/release.yml/main?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/release.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:22: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:36: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:48: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/test.yml:50: update your workflow using https://app.stepsecurity.io/secureworkflow/styled-components/styled-components/test.yml/main?enable=pin
Info: 0 out of 12 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

4.3

/10

Last Scanned on 2025-06-30

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to styled-components

Other packages similar to styled-components

styled-components

Installations

Developer Guide

Yes

CommonJS, UMD

>= 16

20.19.2

10.8.2

Pull Requests

24

1,342

352

966

Issues

297

2,948

2,651

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Sponsor this package

Maintainers

Package Meta Information

Total Downloads

1,286,729,898

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Docs

Example

Looking for v5?

Built with styled-components

Contributing

Badge

Contributors

Backers

Sponsors

License

Acknowledgements

10

10

10

9

5

4

0

0

0

0

0

0

4.3

/10

Built with `styled-components`