Emotion
A JavaScript library for writing CSS styles inside your code, mainly for React apps.
- Stars
- 18k
- Forks
- 1.1k
- Licence
- MIT
- Language
- JavaScript
- Last update
- 14 days ago
- Type
- Library
What it is
Emotion is a CSS-in-JS library: you write styles as strings or JavaScript objects inside your components instead of in separate stylesheet files. It is described as offering predictable style composition to avoid CSS specificity problems, plus source maps and labels for debugging. It is aimed at developers building web interfaces, and the README mentions React usage.
- Style a React component with the css prop using an object of CSS properties
- Build reusable styled components with the styled API
- Compose several style objects together to share common styling
- Add responsive styles with media queries and nested selectors, as listed in the docs index
Great for
- React developers who want styles colocated with components
- Teams that want to combine and reuse style objects in JavaScript
- Developers who want source maps and labelled class names while debugging
- Projects that want to optionally add a Babel plugin for extra optimizations
Not ideal for
- Designers or non-programmers, since it requires writing JavaScript code to style pages
- Projects that prefer plain CSS or CSS modules and do not want a runtime styling library
- Teams needing a framework-agnostic setup beyond what the README covers, since the README focuses on React examples
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm
Install the core React package
npm install --save @emotion/react - 2
Run it
- Install @emotion/react with npm in your React project
- Import jsx from @emotion/react and add the /** @jsx jsx */ pragma to your file
- Add a css prop with an object such as { color: 'hotpink' } to an element
- Run your app and inspect the element to confirm the styles apply
- 3
Get the most out of it
- Read the Babel plugin documentation to see optimizations and customizations it enables
- Use the styled API for reusable styled components
- Use composition to combine style objects and avoid duplication
- Try the demo sandbox linked in the README to experiment before installing
Downloads
Strengths
- The README describes predictable composition that helps avoid CSS specificity issues
- Source maps and labels are offered for developer experience
- The package is MIT licensed and has a large community with 18k+ GitHub stars
Trade-offs
- It is a runtime styling library, so styles are computed in JavaScript, which the README does not quantify beyond claiming good performance with caching
- The README is truncated and most detail lives in the external docs site
- The Babel plugin is optional, so getting the most out of it means extra setup
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| emotion (this) | 18k | Library | intermediate | 14 days ago | React developers who want styles colocated with components |
| styled-components | 41.1k | Library | intermediate | 7 days ago | React developers who prefer writing styles alongside components in JavaScript |
| vanilla-extract | 10.4k | Library | intermediate | 5 days ago | Front-end developers who want type-checked styles in TypeScript |
| linaria | 12.4k | Library | intermediate | 4 days ago | React or other JavaScript teams who want CSS-in-JS without a runtime styling cost |
| zustand | 58.9k | Library | beginner | 15 days ago | React developers who want simpler shared state than Redux |
| react-hook-form | 44.9k | Library | intermediate | 5 days ago | React developers building forms with several fields |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.