<p align="center" style="color: #343a40"> <img src="https://raw.githubusercontent.com/emotion-js/emotion/main/emotion.png" alt="Emotion logo" height="150" width="150"> <h1 align="center">emotion</h1> </p> <p align="center" style="font-size: 1.2rem;">The Next Generation of CSS-in-JS</p>

Emotion 11 has been released 🚀 See the blog post

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:

• Introduction
• Install
• CSS Prop
• Styled Components
• Composition
• Nested Selectors
• Media Queries

Quick Start

Get up and running with a single import.

bashCopy
npm install --save @emotion/react

jsxCopy
/** @jsx jsx */
import { jsx } from '@emotion/react'

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

Do I Need To Use the Babel Plugin?

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 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]
• open a PR and add yours!

Ecosystem

• stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
• facepaint
• emotion-vue
• nuxt-community/emotion-module - Emotion module for Nuxt.js
• 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.
• monad-ui - Utility First CSS-In-JS
• css-in-js-media - you can deal with responsive design using css-in-js easily with this css-in-js-media which is similar with include-media
• emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet

In the Wild

• feathery.io
• frontity.org
• abacusfi.com
• healthline.com
• nytimes.com
• vault.crucible.gg
• render.com
• gatsbythemes.com
• blazity.com
• postmates.com
• thedisconnect.co
• zefenify.com
• sentry.io
• comparett.com
• Domain.com.au
• cyberhaven.com
• CommercialRealEstate.com.au
• codecademy.com
• Apache Superset

Sponsors

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

<a href="https://thinkmill.com.au" target="_blank"><img height="64" alt="Thinkmill" src="https://thinkmill.github.io/badge/wide-logo.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/0/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/0/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/1/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/1/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/2/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/2/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/3/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/3/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/4/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/4/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/5/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/5/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/6/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/6/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/7/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/7/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/8/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/8/avatar.svg"></a>
<a href="https://opencollective.com/emotion/sponsor/9/website" target="_blank"><img src="https://opencollective.com/emotion/sponsor/9/avatar.svg"></a>

Backers

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

<a href="https://opencollective.com/emotion#backers" target="_blank"><img src="https://opencollective.com/emotion/backers.svg?width=890"></a>

Contributors

This project exists thanks to all the people who contribute. [Contribute].
<a href="https://github.com/emotion-js/emotion/graphs/contributors"><img src="https://opencollective.com/emotion/contributors.svg?width=890&button=false" /></a>