React Styling Libraries

Libraries

10
logo

Emotion

Emotion Team

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.
Emotion GitHub RepositoryEmotion NPM PackageEmotion Bundle Size Stats

logo

TailwindCSS

Adam Wathan & Jonathan Reinink

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.
TailwindCSS GitHub RepositoryTailwindCSS NPM PackageTailwindCSS Bundle Size Stats

logo

styled-components

Glen Maddern & Maximilian Stoiber

Utilising tagged template literals (a recent addition to JavaScript) and the power of CSS, styled-components allows you to write actual CSS code to style your components. It also removes the mapping between components and styles – using components as a low-level styling construct could not be easier!
styled-components GitHub Repositorystyled-components NPM Packagestyled-components Bundle Size Stats

logo

CSS Loader

OpenJS Foundation

Allows the use of CSS Modules in projects built using Webpack. Also interprets @import and url() like import/require() and will resolve them.
CSS Loader GitHub RepositoryCSS Loader NPM PackageCSS Loader Bundle Size Stats

logo

PostCSS

Andrey Sitnik

PostCSS takes a CSS file and provides an API to analyze and modify its rules (by transforming them into an Abstract Syntax Tree). This API can then be used by plugins to do a lot of useful things, e.g., to find errors automatically, or to insert vendor prefixes.
PostCSS GitHub RepositoryPostCSS NPM PackagePostCSS Bundle Size Stats

logo

Sass

Google

Sass is a very mature, stable, and powerful professional grade CSS extension language. It provides a superset of CSS with features like nesting, variables, imports and mixins.
Sass GitHub RepositorySass NPM PackageSass Bundle Size Stats

logo

Aphrodite

Khan Academy

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation.
Aphrodite GitHub RepositoryAphrodite NPM PackageAphrodite Bundle Size Stats

logo

Radium

Formidable Labs

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
Radium GitHub RepositoryRadium NPM PackageRadium Bundle Size Stats

logo
Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
Vanilla Extract GitHub RepositoryVanilla Extract NPM PackageVanilla Extract Bundle Size Stats

logo
Generate a static set of custom utility classes and compose them either statically at build time, or dynamically at runtime, without the usual style generation overhead of CSS-in-JS. Basically, it’s like building your own zero-runtime, type-safe version of Tailwind, Styled System, etc.
Sprinkles GitHub RepositorySprinkles NPM PackageSprinkles Bundle Size Stats