DocumentationCommunityGitHubSlackSpectrum

Getting Started

IntroductionInstallCSSStyled ComponentsCompositionObject StylesNested SelectorsMedia QueriesGlobal Styles

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.

The examples in this documentation use React but Emotion is not limited to React. The exceptions to this are react-emotion and preact-emotion that export styled, they require React and Preact respectively. Everything from the emotion package works with any library or framework.

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.

import { css } from 'emotion'

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