Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles




Edit this page



The Next Generation of CSS-in-JS

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov core gzip size core size react gzip size react 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
import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;

React with Optional Babel Plugin

npm install --save emotion react-emotion babel-plugin-emotion

Note: use preact-emotion in place of react-emotion if using Preact

import styled, { css } from 'react-emotion'

const Container = styled('div')`
  background: #333;
const myStyle = css`
  color: rebeccapurple;
const app = () => (
    <p className={myStyle}>Hello World</p>

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]

Previous Page
Extract Static
Next Page