style as a function of state
Switch branches/tags
Clone or download
Failed to load latest commit information.
.circleci Update flow (#919) Oct 12, 2018
.github Update Oct 11, 2018
__mocks__ Emotion Native (#759) Jul 28, 2018
docs Update Oct 20, 2018
flow-typed/npm Reimplement vanilla emotion, babel-plugin-emotion with new utils and … Sep 30, 2018
packages Revert "WIP cache SSR results across caches" Oct 21, 2018
playgrounds Publish Oct 16, 2018
scripts add more benchmarks for reasons.... Oct 21, 2018
site Publish Oct 15, 2018
test Reimplement vanilla emotion, babel-plugin-emotion with new utils and … Sep 30, 2018
.eslintignore Migrate next packages (#763) Jul 13, 2018
.flowconfig Update flow (#919) Oct 12, 2018
.gitignore Update .gitignore Sep 30, 2018
.nvmrc New site with gatsby (#368) Jan 4, 2018
.prettierignore Add package.json to .prettierignore Jan 31, 2018
.prettierrc.yaml Change live code and add precommit hook for prettifying markdown (#782) Aug 1, 2018
.yarnrc Emotion Primitives (#658) Jul 6, 2018 Drop support for preact (#896) Oct 12, 2018 Update Jul 29, 2018 Add (#65) Jul 1, 2017 Emotion 10 docs (#799) Oct 8, 2018
LICENSE 👩‍🚀 May 27, 2017 Fix labels of size badges in README (#946) Oct 18, 2018
babel.config.js Make local development & babel plugin hashing compatible with Windows ( Oct 10, 2018
codecov.yml Add codecov.yml (#371) Oct 2, 2017
emotion.png update to logo instead of bob ross 😭 Jul 10, 2017
jest.config.js Migrate next packages (#763) Jul 13, 2018
jest.dist.js Migrate next packages (#763) Jul 13, 2018
lerna.json Change to independent versioning Oct 4, 2018
netlify.toml Change build system and update Jest (#747) Jul 2, 2018
package.json Update package.json Oct 19, 2018
yarn.lock SSR benchmarks (#951) Oct 21, 2018



The Next Generation of CSS-in-JS

Emotion 10 is currently in beta, there are many breaking changes between versions, for docs on Emotion 9 please go to the latest v9 tag or

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]