styled-components
CSS-in-JS library for styling React components with dynamic scoped styles.
Styling and CSS npm MIT
Used in agent projects
154
1.2% of 12,697 public repos built with AI coding agents
Rank in styling and css
#5 of 15
by use in those projects
Downloads
10.8M
npm, last 7 days, styled-components
GitHub stars
41.1K
last push Sep 28, 2026
How styled-components is used
styled-components is a dependency in 154 of the 12,697 public GitHub projects set up for AI coding agents that we scanned (1.2%), #5 of 15 in styling and css. The most used alternative there is Tailwind CSS. Projects that use it most often also use React (96.1%), React Router (42.9%), Testing Library (33.1%).
Often used with styled-components
| React | 96.1% of styled-components projects · 2.2× more than average |
|---|---|
| React Router | 42.9% of styled-components projects · 5.6× more than average |
| Testing Library | 33.1% of styled-components projects · 4.6× more than average |
| React Icons | 31.2% of styled-components projects · 5.8× more than average |
| react-scripts | 29.9% of styled-components projects · 16.4× more than average |
| Web Vitals | 26.6% of styled-components projects · 15.2× more than average |
| Three.js | 41.6% of styled-components projects · 2.3× more than average |
| ESLint | 59.7% of styled-components projects · 1.6× more than average |
By coding agent
| Claude Code | 0.3% of projects set up for it |
|---|---|
| Cursor | 0.4% of projects set up for it |
| GitHub Copilot | 0.3% of projects set up for it |
Share of public repos configured for each agent that list styled-components as a dependency.
Install
| Package | npm install styled-components |
|---|---|
| Main stacks | TypeScript / JavaScript (92), Next.js (57), Python (2), React Native / Expo (2) |
| Example projects | storybookjs/mealdrop, dydxprotocol/v4-web, Synerise/synerise-design, sonnylazuardi/sonnylab.com, GooseFX1/gfx-web-app |
Alternatives to styled-components
| Tool | Used in agent projects | Downloads / wk | GitHub stars | License |
|---|---|---|---|---|
| Tailwind CSS npm Utility-first CSS framework for building custom user interfaces rapidly. |
4,410 (34.7%) | 134M | 97.9K | MIT |
| Tailwind Merge npm Merge Tailwind CSS classes intelligently without style conflicts. |
2,136 (16.8%) | 85.8M | 5,695 | MIT |
| Emotion npm CSS-in-JS library for styling React components with scoped styles and theming. |
332 (2.6%) | 20.2M | 18K | MIT |
| Sass npm CSS preprocessor adding variables, nesting and mixins to stylesheets. |
233 (1.8%) | 30.9M | 4,230 | MIT |
| react-responsive npm React library for implementing responsive design with CSS media queries. |
54 (0.4%) | 1.4M | 7,182 | MIT |
| tailwind-variants npm Compose Tailwind CSS classes conditionally with a variant-first composition API. |
53 (0.4%) | 4.3M | 3,318 | MIT |
| postcss-import npm PostCSS plugin to inline @import rules before other transformations. |
46 (0.4%) | 41M | 1,409 | MIT |
| NativeWind npm Use Tailwind CSS in cross-platform React Native applications. |
45 (0.4%) | 1.9M | 8,106 | MIT |