Introduction

Edit this page

Emotion is a performant and flexible CSS-in-JS library. It’s inspired by many other CSS-in-JS libraries like glam, glamor, styled-components and glamorous. It allows you to style applications quickly with string styles 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 and insertRule in production.

Emotion has two main versions, a version specific to React and a vanilla version that is usable without React. Most of the documentation focuses on the React-specific version, but most of the concepts taught in the React-specific version also apply to the vanilla version. The vanilla version of Emotion also works with React, but the React-specific version has many extra useful features that aren’t possible in the vanilla version such as zero-config, server-side-rendering and theming, so it’s recommended to use the React-specific version if you’re using React.

This documentation has lots of live examples that look like this. They’re all editable so you can try Emotion without installing it. Try changing the color below!

/** @jsx jsx */
import { jsx, css } from '@emotion/core'

render(
  <div
    css={css`
      color: hotpink;
    `}
  >
    Some text.
  </div>
)
Some text.
Next:Install