Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time
June 17, 2023 08:34
August 29, 2022 16:37
June 17, 2023 08:34
August 2, 2022 15:56
August 2, 2022 15:56
August 2, 2022 15:56
August 29, 2022 16:37
February 17, 2023 09:19
December 23, 2019 00:02
June 17, 2023 08:34

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.

👀 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 (
        color: 'hotpink'

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

Demo Code Sandbox



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].