The Next Generation of CSS-in-JS

Emotion 10 is currently in beta, there are many breaking changes between versions, for docs on Emotion 9 please go to the latest v9 tag or https://emotion.sh

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/core

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

let SomeComponent = props => {
  return (
    <div
      css={{
        color: 'hotpink'
      }}
      {...props}
    />
  )
}

The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.

Look here 👉 emotion babel plugin feature table and documentation

Demo Code Sandbox

• 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!

• stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• facepaint
• emotion-vue
• ember-emotion
• CSS to emotion transform
• ShevyJS
• design-system-utils - Utilities to give better access to your design system.
• polished - Lightweight set of Sass/Compass-style mixins/helpers for writing styles in JavaScript.

• healthline.com
• nytimes.com
• vault.crucible.gg
• saldotuc.com
• gatsbythemes.com
• blazity.com
• postmates.com
• thedisconnect.co
• zefenify.com
• sentry.io
• comparett.com

This project exists thanks to all the people who contribute. [Contribute].

Thank you to all our backers! 🙏 [Become a backer]

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]