OSS TanbouOn this page
Overview
Emotion defines CSS from JavaScript or TypeScript and applies it to React components. It supports object styles, template literals, style composition, global styles, theming, and caching so component code and styling can live together without manually managing generated class names.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Apply object or string styles with the css prop and css()
@emotion/react exposes css, jsx, and the CSS prop so React components can use either object styles or template-literal styles.
Compose styles for variants and shared UI primitives
Predictable composition lets teams layer common styles, variants, and state-specific rules while avoiding many specificity conflicts.
Sources: [1]
Integrate global styles, themes, and custom caches
Global, ThemeProvider, and CacheProvider support application-level CSS, design tokens, and custom caching or SSR boundaries.
Sources: [2]
Best fit
Fits React design systems that keep component logic and dynamic styles together
It is useful when styles depend on props or themes and teams want reusable UI primitives without separating styling into standalone CSS files.
Sources: [1]
Before adoption
@emotion/react 11.14.0 requires React 16.8 or later
Package metadata declares React >=16.8.0 as a peer dependency. Review React and SSR/runtime compatibility together.
Sources: [3]
Official sources
- [1]Emotion repository README(2026-10-05)
- [2]@emotion/react 11.14.0 README(2026-10-05)
- [3]@emotion/react 11.14.0 package metadata(2026-10-05)
- [4]@emotion/react 11.14.0 release(2026-10-05)
- [5]Emotion MIT license(2026-10-05)
Supplemental curator note
Emotion is a multi-package repository. Use @emotion/react as the React foundation and add @emotion/styled only when the styled API is needed, pinning packages independently.
Try it in 3 steps
- 1
Install pinned Emotion React 11.14.0
Create an isolated npm project with the React package and exact React peer dependency.
demo=$(mktemp -d "${TMPDIR:-/tmp}/emotion.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact @emotion/react@11.14.0 react@19.2.0 - 2
Verify the package version
Require the installed
@emotion/reactpackage to match the reviewed version.test "$(node -e "console.log(JSON.parse(require('fs').readFileSync('node_modules/@emotion/react/package.json')).version)")" = '11.14.0' - 3
Check representative styling exports
Verify representative composition and provider APIs without starting a browser.
test "$(node --input-type=module -e "import * as E from '@emotion/react'; console.log(['css','jsx','CacheProvider','ThemeProvider'].every(k=>k in E))")" = 'true'
Growth
Growth trends · Last 30 days
18,019 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 0
- Open PRs
- 86
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
GitHub Topics
- css-in-js
- babel-plugin
- react
- reactjs
- css
- emotion
- Stars
- 18,019
- Forks
- 1,137
- Watchers
- 97
- Open issues
- 310
- Contributors
- 304
- Owner type
- Organization
- Primary language
- JavaScript
- License
- MIT
- Repository last updated
- Aug 28, 2026
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Ant Design99,682 Stars
3 shared tag(s)
build enterprise React interfaces quickly with ready-made components, design tokens, theming, and internationalization
TypeScript - Storybook91,200 Stars
3 shared tag(s)
capture UI states once and reuse them across docs, interaction tests, and agent tooling
TypeScript - Zustand58,786 Stars
3 shared tag(s)
manage React state with provider-free hook stores and subscribe through selectors
TypeScript - Expo52,566 Stars
3 shared tag(s)
build React Native apps for Android, iOS, and web from one project model
TypeScript - React250,891 Stars
3 shared tag(s) · 1 shared category(s) · Same language
build web and native interfaces from declarative components
JavaScript - react-i18next10,051 Stars
3 shared tag(s) · 1 shared category(s) · Same language
official React binding that connects i18next resources to components through useTranslation, Trans, providers, and SSR helpers
JavaScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.