CSS-in-JS library designed for high performance style composition


Emotion logo


The Next Generation of CSS-in-JS

Emotion 11 has been released 🚀 See the blog post

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov
@emotion/css size
@emotion/css gzip size
@emotion/react size
@emotion/react gzip size
@emotion/styled size
@emotion/styled gzip size slack

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.

Frequently viewed docs:

Quick Start

Get up and running with a single import.

  1. ``` sh
  2. npm install --save @emotion/react
  3. ```

  1. ``` js
  2. /** @jsx jsx */
  3. import { jsx } from '@emotion/react'

  4. let SomeComponent = props => {
  5.   return (
  6.     <div
  7.       css={{
  8.         color: 'hotpink'
  9.       }}
  10.       {...props}
  11.     />
  12.   )
  13. }
  14. ```

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.

Demo Sandbox


- reactivesearch, a react UI library for Elasticsearch [Website]
- circuit-ui, a react component library built at SumUp [Storybook]
- open a PR and add yours!


- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- nuxt-community/emotion-module - Emotion module for Nuxt.js
- 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 thiscss-in-js-media which is similar with include-media
- emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet

In the Wild


Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]



Thank you to all our backers! 🙏 [Become a backer]


This project exists thanks to all the people who contribute. [Contribute].