@emotion/react
> Simple styling in React.
About
> Simple styling in React.
Live mirror of the GitHub README. Updated whenever the repo's default branch changes.
emotion
The Next Generation of CSS-in-JS
Emotion 11 has been released 🚀 See the blog post
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.
👀 Demo Sandbox
📖 Docs
Frequently viewed docs:
Quick Start
Get up and running with a single import.
npm install --save @emotion/react
/** @jsx jsx */
import { jsx } from '@emotion/react'
let SomeComponent = props => {
return (
<div
css={{
color: 'hotpink'
}}
{...props}
/>
)
}
Do I Need To Use the Babel Plugin?
The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.
Look here 👉 emotion babel plugin feature table and documentation
Demo Sandbox
Examples
- emotion website [Demo Here]
- next-hnpwa-guide-kit [Demo Here]
- reactivesearch, a react UI library for Elasticsearch [Website]
- circuit-ui, a react component library built at SumUp [Storybook]
- open a PR and add yours!
Ecosystem
- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- facepaint
- emotion-vue
- nuxt-community/emotion-module - Emotion module for Nuxt.js
- ember-emotion
- CSS to emotion transform
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.
- polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.
- monad-ui - Utility First CSS-In-JS
- css-in-js-media - you can deal with responsive design using css-in-js easily with this
css-in-js-mediawhich is similar with include-media - emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet
In the Wild
- feathery.io
- frontity.org
- abacusfi.com
- healthline.com
- nytimes.com
- vault.crucible.gg
- render.com
- gatsbythemes.com
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
- Domain.com.au
- cyberhaven.com
- CommercialRealEstate.com.au
- codecademy.com
- Apache Superset
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Backers
Thank you to all our backers! 🙏 [Become a backer]
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Quick facts
npm install @emotion/reactCommon pairings
Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.
How Sourcemap Explorer detects @emotion/react
We catch @emotion/react from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/@emotion/react/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.
- 1
Confirm the site exposes sourcemaps
In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment.
- 2
Find the package in the bundle
Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/@emotion/react/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/@emotion/react/package.json` gives you the exact installed version.
- 3
Read the version directly from package.json
Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/@emotion/react/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.
Recent versions
FAQ
What is @emotion/react used for?
> Simple styling in React.
How can I tell if a website is using @emotion/react?
Open the page in Chrome with the Sourcemap Explorer extension installed and read the Stack tab. We catch `@emotion/react` from two complementary signals: `node_modules/@emotion/react/` paths inside the JavaScript sourcemap, and the embedded `package.json` we read for exact-version detection. Without the extension you can do the same lookup manually in DevTools — the steps are listed in the "How Sourcemap Explorer detects" section above.
What is the latest version of @emotion/react?
11.14.0, as published on the npm registry. The "Recent versions" table on this page lists the most recent 8 releases with their release dates. Sourcemap Explorer reports the version actually bundled into a site, which can lag the latest release by months on real-world deployments.
Where can I read more?
Project homepage: https://github.com/emotion-js/emotion/tree/main#readme. Source code: https://github.com/emotion-js/emotion.git#main. Published on npm: https://www.npmjs.com/package/@emotion/react. Licensed as MIT.
Detected by Sourcemap Explorer
When a bundle ships sourcemaps, we read the embedded package.json for @emotion/react and report the precise version. Without sourcemaps, an import / require in the page's scripts is enough to flag it.