Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 (by styled-components)

Styled-components Alternatives

Similar projects and alternatives to styled-components
  • GitHub repo Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • GitHub repo Next.js

    The React Framework

  • Scout

    Get performance insights in less than 4 minutes. Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.

  • GitHub repo classnames

    A simple javascript utility for conditionally joining classNames together

  • GitHub repo razzle

    ✨ Create server-rendered universal JavaScript applications with no configuration

  • GitHub repo twind

    The smallest, fastest, most feature complete Tailwind-in-JS solution in existence.

  • GitHub repo TypeScript-Website

    The Website and web infrastructure for learning TypeScript

  • GitHub repo developer-roadmap

    Roadmap to becoming a web developer in 2021

  • GitHub repo Flutter

    Flutter makes it easy and fast to build beautiful apps for mobile and beyond.

  • GitHub repo Visual Studio Code

    Visual Studio Code

  • GitHub repo parcel

    📦🚀 Blazing fast, zero configuration web application bundler

  • GitHub repo formik

    Build forms in React, without the tears 😭

  • GitHub repo Bit

    Build, distribute, and collaborate on components.

  • GitHub repo emotion

    👩‍🎤 CSS-in-JS library designed for high performance style composition

  • GitHub repo Radium

    A toolchain for React component styling.

  • GitHub repo Microbundle

    📦 Zero-configuration bundler for tiny modules.

  • GitHub repo Aphrodite

    Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

  • GitHub repo theme-ui

    Build consistent, themeable React apps based on constraint-based design principles

  • GitHub repo jest-styled-components

    🔧 💅 Jest utilities for Styled Components

  • GitHub repo compiled

    Build time atomic CSS-in-JS. Baked and ready to serve.

  • GitHub repo actions

NOTE: The number of mentions on this list indicates mentions on common posts. Hence, a higher number means a better styled-components alternative or higher similarity.


Posts where styled-components has been mentioned. We have used some of these posts to build our list of alternatives and similar projects - the last one was on 2021-03-02.
  • Voltar a estudar programação e dinheiro | 2021-03-02
  • Web developers on my team can't make my designs responsive | 2021-03-01
    A more modern solution is to use a library like 'styled-components' or 'css blocks'. I personally use styled-components in our companies projects. styled-components allows to define css rules on a global or local level. The big advantage is that you don't have to worry about side effects when you apply styles to a specific component. Also styled-components has an out-of-the-box theming engine. Which makes later requirements (like a dark mode, or changing breakpoints) easy to handle.
  • Share variables between JavaScript and CSS | 2021-02-28
    I've already mentioned Emotion, but other CSS-in-JS libraries to check out include Styled Components, JSS, Theme-UI, Radium, and Aprhodite.
  • Media queries & custom props on Styled Components | React | 2021-02-27
    In this step I will assume that we have a project with React, Typescript and Styled Components configured correctly and I will only show the dependencies that will be used in this tutorial:
  • From Create React App to SSR with Razzle | 2021-02-25
    The app was being implemented using Styled Components that already comes with an integrated solution for SSR, allowing you to load all the required styles for the target page and put it at the end of your
  • React - Bora estilizar? | 2021-02-19
  • The tiniest CSS-in-JS solution for your open-source React components | 2021-02-18
    It seemed like a good solution, but we've started receiving complaints from many developers that were unable to use the styles. It is quite common in the React ecosystem to use libraries like Emotion, Styled-Components, or other CSS-in-JS libraries exclusively and to entirely forgo the inclusion of a style loader. As such, usage of react-colorful would necessitate the alteration of build configurations for these users to be able to access the default styling.
  • 🎨 Light mode e Dark mode e temas customizados com Styled-components e NextJS com Typescript. | 2021-02-17
  • TailwindCSS vs Styled-Components in ReactJs | 2021-02-17
  • Css help | 2021-02-17
    I just usually include css import to my components - that works just fine. Then if you need some value calculated in JS just use style={{param: yourValue}} Alternatively you could use Styled components support props so you can add responsiveness by passing them into styles components.
  • How to Build A React TS Tailwind Design System | 2021-02-16
    All of the front-end apps are built with React and adopted Styled Components at some point. Some had also SaSS mixed in, some had TypeScript, and some Flow.
  • Hot take: all CSS frameworks are bad | 2021-02-05
    Styled components do have the advantage of being javascript, in that its very flexible and can give you pretty fine grain control of how your styles react to state/prop changes. However, it requires a shift in how you write your styles and isn't exactly 1:1 with using normal css classes in react, see as an example. In general, I'm hesitant to add more abstraction than is really needed to a code base, since it kinda gets out of hand on its own in js ecosystem.
  • Understanding Tagged Template Literal in JS | 2021-01-16
    This features is so powerful that some awesome libraries were built on it such as Styled Components and graphql-tag.


Basic styled-components repo stats
2 days ago

styled-components/styled-components is an open source project licensed under MIT License which is an OSI approved license.