emotion-js/emotion

What is it?

Key features

• 01Write styles with either string or object syntax.
• 02Provides a css prop and styled-component style APIs.
• 03Predictable style composition that avoids specificity issues.
• 04Source maps and labels for easier debugging.
• 05Heavy style caching in production.
• 06Optional Babel plugin for additional optimizations.

Use cases

• Styling React applications with props-driven or dynamic styles.
• Building reusable component libraries with composable styles.
• Migrating away from class-based stylesheets toward co-located component styles.

Quick start

1. 1

   Install the core package with npm

   npm install --save @emotion/react
2. 2

   Import jsx from Emotion and use the css prop on a component

Things to know

• !The Babel plugin is optional but some features need it.

Topics

FAQ

What is emotion?

A performant, flexible CSS-in-JS library for styling apps with string or object styles and predictable style composition. Emotion lets you write component styles in JavaScript, using either string or object syntax. Styles are generated at runtime and applied as CSS, which lets you use props and state to change appearance without maintaining separate stylesheets.

Is emotion free to use? What license does it have?

emotion is open source under the MIT license. Check the license terms before using it in commercial products.

Is emotion still maintained?

Updated within 6 months. The last commit to emotion was on Aug 28, 2026.

What can I use emotion for?

Styling React applications with props-driven or dynamic styles. Building reusable component libraries with composable styles. Migrating away from class-based stylesheets toward co-located component styles.

How do I install emotion?

Install the core package with npm: npm install --save @emotion/react Import jsx from Emotion and use the css prop on a component

Where can I get emotion?

The source code and installation instructions are on GitHub: https://github.com/emotion-js/emotion