Repository: emotion-js/emotion

Stars: 18008

README.md

<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

![Backers on Open Collective](#backers) ![Sponsors on Open Collective](#sponsors) ![npm version](https://badge.fury.io/js/emotion)
![Build Status](https://circleci.com/gh/emotion-js/emotion)
![codecov](https://codecov.io/gh/emotion-js/emotion)
!@emotion/css size
!@emotion/css gzip size
!@emotion/react size
!@emotion/react gzip size
!@emotion/styled size
!@emotion/styled gzip size
![slack](https://join.slack.com/t/emotion-slack/shared_invite/zt-rmtwsy74-2uvyFdz5uxa8OiMguJJeuQ)

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.

bash

npm install --save @emotion/react

jsx

/ @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]

Backers

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

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>

Repository: emotion-js/emotion

Stars: 18008

README.md Copy Chapter

👀 Demo Sandbox

📖 Docs

Quick Start Copy Section

Do I Need To Use the Babel Plugin? Copy Section

Demo Sandbox Copy Section

Examples Copy Section

Ecosystem Copy Section

In the Wild Copy Section

Sponsors Copy Chapter

Backers Copy Chapter

Contributors Copy Chapter