styled-components logo

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress.
620
332
+ 1
6

What is styled-components?

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
styled-components is a tool in the JavaScript Framework Components category of a tech stack.
styled-components is an open source tool with 31.2K GitHub stars and 1.9K GitHub forks. Here’s a link to styled-components's open source repository on GitHub

Who uses styled-components?

Companies
203 companies reportedly use styled-components in their tech stacks, including Graphy, Revolut, and Frontend.

Developers
361 developers on StackShare have stated that they use styled-components.

styled-components Integrations

Pros of styled-components
Public Decisions about styled-components

Here are some stack decisions, common use cases and reviews by companies and developers who chose styled-components in their tech stack.

Hampton Catlin
VP of Engineering at Rent The Runway · | 4 upvotes · 221.2K views

We use Sass because I invented it! No, that's not a joke at all! Well, let me explain. So, we used Sass before I started at Rent the Runway because it's the de-facto industry standard for pre-compiled and pre-processed CSS. We do also use PostCSS for stuff like vendor prefixing and various transformations, but Sass (specifically SCSS) is the main developer-focused language for describing our styling. Some internal apps use styled-components and @Aphrodite, but our main website is allllll Sassy. Oh, but the non-joking part is the inventing part. /shrug

See more
Vishal Narkhede
Javascript Developer at getStream.io · | 19 upvotes · 332.7K views

Recently, the team at Stream published a React Native SDK for our new Chat by Stream product. React Native brings the power of JavaScript to the world of mobile development, making it easy to develop apps for multiple platforms. We decided to publish two different endpoints for the SDK – Expo and React Native (non-expo), to avoid the hurdle and setup of using the Expo library in React Native only projects on the consumer side.

The capability of style customization is one a large deal breaker for frontend SDKs. To solve this, we decided to use styled-components in our SDK, which makes it easy to add support for themes on top of our existing components. This practice reduces the maintenance effort for stylings of custom components and keeps the overall codebase clean.

For module bundling, we decided to go with Rollup.js instead of Webpack due to its simplicity and performance in the area of library/module providers. We are using Babel for transpiling code, enabling our team to use JavaScript's next-generation features. Additionally, we are using the React Styleguidist component documentation, which makes documenting the React Native code a breeze.

See more

styled-components Alternatives & Comparisons

What are some alternatives to styled-components?
Emotion
Emotion is a performant and flexible CSS-in-JS library. Building on many other CSS-in-JS libraries, it allows you to style apps quickly with string or object styles. It has predictable composition to avoid specificity issues with CSS. With source maps and labels, Emotion has a great developer experience and great performance with heavy caching in production.
CSS Modules
It is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With this, your CSS class names become similar to local variables in JavaScript. It goes into the compiler, and CSS comes out the other side.
CSS Blocks
By combining an opinionated authoring system, build-time analysis and rewriting of templates, and a new type of CSS optimizer, css-blocks breathes new power and ease of use into the technologies and best practices that stylesheet developers already know and love.
Radium
Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
See all alternatives

styled-components's Followers
332 developers follow styled-components to keep up with related blogs and decisions.