emotion-js/emotion

Health v2 · maintenance only

Adoption not part of the score

18016 stars · 1140 forks observed · 2026-08-28

What it is AI-extracted, prompt v1, taxonomy v1, 2026-08-29, confidence not recorded

Emotion is a high-performance CSS-in-JS library for writing CSS styles with JavaScript, supporting both string and object styles with predictable composition. It offers a framework-agnostic package (@emotion/css) and a React-focused package (@emotion/react) with css prop, styled API, theming, and server-side rendering support.

Use cases

• style React components with a css prop instead of stylesheets
• create styled components with props-based dynamic styling
• compose CSS styles without specificity conflicts
• write framework-agnostic CSS-in-JS with generated class names
• server-side render styles for a React app
• set up theming for a component library
• inject global styles like resets and font faces
• define keyframe animations in JavaScript

When to choose

• you want performant CSS-in-JS with heavy production caching
• you need both string template and object style syntaxes
• you want first-class React integration with css prop and styled APIs
• you need SSR support with critical style extraction
• you want source maps, labels, and testing utilities for styling

When to avoid

• you prefer plain CSS files or CSS Modules without runtime overhead
• your project cannot configure Babel and you need full css prop optimization
• you want a zero-runtime styling solution
• you are not using a JavaScript bundler/build environment

Facets

library · maturity stable

css-framework ui-components frontend-framework templating web-development frontend web-design browser cross-platform css-in-js react styled-components babel-plugin server-side-rendering theming nodejs

Member repositories

For agents

markdown · JSON · MCP: product_card(name="emotion-js/emotion")