emotion

The Next Generation of CSS-in-JS

emotion is a high performance, lightweight css-in-js library that supports both string and object based styles.

---

---

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

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

Demo Code Sandbox

Examples

• emotion website [Demo Here]
• next-hnpwa-guide-kit [Demo Here]
• open a PR and add yours!

About

The core idea comes from Sunil Pai’s glam library and its philosophy is laid out here.

-- Introduction Article

Documentation

API

• Styling components with styled

• Create composable styles with css classes and props

  • composition

• Object styles

• Combine styles and class names with cx

• keyframes

• fontFace

• injectGlobal

Doc files

• All docs
• Version 7 docs

Ecosystem

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

In the Wild

• healthline.com
• vault.crucible.gg
• saldotuc.com
• gatsbythemes.com
• blazity.com