The Next Generation of CSS-in-JS

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:

• Introduction
• Install
• CSS
• Styled Components
• Composition
• Nested Selectors
• Media Queries

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;
`
app.classList.add(myStyle)

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 = () => (
  <Container>
    <p className={myStyle}>Hello World</p>
  </Container>
)

Demo Code Sandbox

• emotion website [Demo Here]
• next-hnpwa-guide-kit [Demo Here]
• reactivesearch, a react UI library for Elasticsearch [Website]
• open a PR and add yours!

• facepaint
• emotion-vue
• ember-emotion
• CSS to emotion transform
• ShevyJS
• design-system-utils - Utilities to give better access to your design system.

• healthline.com
• vault.crucible.gg
• saldotuc.com
• gatsbythemes.com
• blazity.com
• postmates.com
• thedisconnect.co