Package Exports

emotion

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (emotion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

emotion

The Next Generation of CSS-in-JS

core size core gzip size react size react gzip size

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

import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
`
app.classList.add(myStyle)

Look here 👉 emotion babel plugin feature table and documentation

Demo Sandbox

Demo Code Sandbox

Examples

emotion website [Demo Here]
next-hnpwa-guide-kit [Demo Here]
reactivesearch, a react UI library for Elasticsearch [Website]
circuit-ui, a react component library built at SumUp [Storybook]
govuk-react, a React component library built for UK Government departments
open a PR and add yours!

Ecosystem

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

JSPM

emotion

Package Exports

Readme

emotion

👀 Demo Sandbox

📖 Docs

Quick Start

Demo Sandbox

Examples

Ecosystem

In the Wild

Contributors

Backers

Sponsors