styled-components is a CSS-in-JS library for React that lets developers write actual CSS inside their JavaScript and attach it directly to components. Its own documentation explains that the library “utilises tagged template literals to style your components,” so a styled element is defined by writing CSS between backticks rather than by referencing a class in a separate stylesheet. The repository sums up the project as “fast, expressive styling for React” that styles components with real CSS, “scoped automatically and delivered only when needed.”
The library was created by Max Stoiber and Glen Maddern and launched in October 2016. As the project’s tenth-anniversary post recounts, the founding question was “what if CSS lived inside your components, not alongside them? What if styled primitives were the component?” The answer leaned on tagged template literals, then a relatively new JavaScript feature, to make it possible to embed genuine CSS, complete with media queries and pseudo-selectors, inside component definitions. The README also credits earlier work by a number of contributors that informed the design.
The mechanism is what made the approach distinctive. Calling something like a styled button with a block of CSS produces a normal React component whose styles are bound to it. The library generates unique class names automatically, which, as its docs note, “eliminates class name bugs” and removes the mapping between components and styles. Because the styles are JavaScript, they can read component props and theme values to compute styling dynamically, making state-driven and themeable interfaces straightforward to express.
styled-components became one of the most influential examples of the broader CSS-in-JS pattern, and for several years it was a default styling choice in many React codebases. It also helped surface the trade-offs of runtime styling: generating and injecting styles in the browser as components render carries a performance cost, a concern that shaped later discussion about whether style extraction should happen at build time instead.
Developed in the open at the styled-components/styled-components repository, the library grew an extensive ecosystem of theming utilities, server-side rendering support, and integrations. Its tagged-template API was widely imitated and is among the most recognizable shapes that CSS-in-JS took, leaving a clear mark on how component-scoped styling was approached across the React community.