The best styled-components alternatives
6 tools that do a similar job to styled-components, 6 of them open source. Each entry says what it does and who it suits, so you can pick the one that fits instead of the most famous.
You're replacing
styled-componentsA library for styling React components with CSS written inside your JavaScript.
- 1
Emotion
Open source · MIT · ★ 18k
A JavaScript library for writing CSS styles inside your code, mainly for React apps.
Best for: React developers who want styles colocated with components; Teams that want to combine and reuse style objects in JavaScript
- 2
Tailwind CSS
Open source · MIT · ★ 98.3k
A utility-first CSS framework for building custom user interfaces quickly.
Best for: Web developers who build their own interfaces and want to avoid writing large custom stylesheets; Teams that want a consistent set of design utilities across a project
- 3
vanilla-extract
Open source · MIT · ★ 10.4k
Write CSS styles in TypeScript; they compile to static CSS files at build time.
Best for: Front-end developers who want type-checked styles in TypeScript; Teams using React, or any other front-end framework, or no framework at all
- 4
Linaria
Open source · MIT · ★ 12.4k
A CSS-in-JS library that extracts styles to plain CSS files at build time, so no styling code runs in the brow
Best for: React or other JavaScript teams who want CSS-in-JS without a runtime styling cost; Projects that already use a supported bundler and can add a build-time plugin
- 5
React Native for Web
Open source · MIT · ★ 22.2k
Runs React Native UI components in the browser, using React DOM.
Best for: Developers who already use React Native and want the same components on the web; Contributors who want to work on the react-native-web package itself
- 6
Tamagui
Open source · MIT · ★ 14.3k
A TypeScript library for building React and React Native UIs that share styling and code.
Best for: Teams building the same app for web and native with React; Developers who want shared styling across React Native and react-native-web
How we pick: tools in the same category that solve the same problem, projects that name each other as alternatives, and open-source projects that describe themselves as an alternative to styled-components. We don't take payment for placement.