December 25, 2018

371 words 2 mins read



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

repo name emotion-js/emotion
repo link
language JavaScript
size (curr.) 14148 kB
stars (curr.) 10228
created 2017-05-27
license MIT License

Need support upgrading to Emotion 10? See the migration guide

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov core size core gzip size react size react gzip size slack spectrum

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/core
/** @jsx jsx */
import { jsx } from '@emotion/core'

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


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


Thank you to all our backers! ๐Ÿ™ [Become a backer]


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

comments powered by Disqus