Emotion
CSS-in-JS library for styling React components with scoped styles and theming.
Styling and CSS npm MIT
Used in agent projects
332
2.6% of 12,697 public repos built with AI coding agents
Rank in styling and css
#3 of 15
by use in those projects
Downloads
20.2M
npm, last 7 days, @emotion/react
GitHub stars
18K
last push Aug 28, 2026
How Emotion is used
Emotion is a dependency in 332 of the 12,697 public GitHub projects set up for AI coding agents that we scanned (2.6%), #3 of 15 in styling and css. The most used alternative there is Tailwind CSS. Projects that use it most often also use React (99.1%), Material UI (53.6%), Framer Motion (48.2%). It is more common in projects set up for Kiro (4.8%) than for Gemini CLI (1.6%).
Often used with Emotion
| React | 99.1% of Emotion projects · 2.3× more than average |
|---|---|
| Material UI | 53.6% of Emotion projects · 36.6× more than average |
| Framer Motion | 48.2% of Emotion projects · 3.6× more than average |
| React Hook Form | 33.1% of Emotion projects · 4.1× more than average |
| Next.js | 54.5% of Emotion projects · 2.4× more than average |
| React Router | 31.3% of Emotion projects · 4.1× more than average |
| Testing Library | 29.2% of Emotion projects · 4.1× more than average |
| TypeScript | 80.1% of Emotion projects |
By coding agent
| GitHub Copilot | 2.2% of projects set up for it |
|---|---|
| Claude Code | 1.8% of projects set up for it |
| Cursor | 2.2% of projects set up for it |
| OpenAI Codex | 2.9% of projects set up for it |
| OpenCode | 2.8% of projects set up for it |
| Gemini CLI | 1.6% of projects set up for it |
| Kiro | 4.8% of projects set up for it |
| Devin Desktop | 1.8% of projects set up for it |
Share of public repos configured for each agent that list Emotion as a dependency.
Install
| Package | npm install @emotion/react |
|---|---|
| Packages counted | @emotion/react, @emotion/styled, @emotion/is-prop-valid, @emotion/cache, @emotion/server, @emotion/babel-plugin, @emotion/css, @emotion/core |
| Main stacks | Next.js (170), TypeScript / JavaScript (154), Python (4), React Native / Expo (1) |
| Example projects | PageAI-Pro/vibe-coding-starter, thepower/PowerDapp, blockscout/frontend, 1600822305/AetherLink, rajyraman/Levelup-for-Dynamics-CRM |
Alternatives to Emotion
| Tool | Used in agent projects | Downloads / wk | GitHub stars | License |
|---|---|---|---|---|
| Tailwind CSS npm Utility-first CSS framework for building custom user interfaces rapidly. |
4,410 (34.7%) | 134M | 97.9K | MIT |
| Tailwind Merge npm Merge Tailwind CSS classes intelligently without style conflicts. |
2,136 (16.8%) | 85.8M | 5,695 | MIT |
| Sass npm CSS preprocessor adding variables, nesting and mixins to stylesheets. |
233 (1.8%) | 30.9M | 4,230 | MIT |
| styled-components npm CSS-in-JS library for styling React components with dynamic scoped styles. |
154 (1.2%) | 10.8M | 41.1K | MIT |
| react-responsive npm React library for implementing responsive design with CSS media queries. |
54 (0.4%) | 1.4M | 7,182 | MIT |
| tailwind-variants npm Compose Tailwind CSS classes conditionally with a variant-first composition API. |
53 (0.4%) | 4.3M | 3,318 | MIT |
| postcss-import npm PostCSS plugin to inline @import rules before other transformations. |
46 (0.4%) | 41M | 1,409 | MIT |
| NativeWind npm Use Tailwind CSS in cross-platform React Native applications. |
45 (0.4%) | 1.9M | 8,106 | MIT |