• Stars
    star
    17,397
  • Rank 1,570 (Top 0.04 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 7 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

👩‍🎤 CSS-in-JS library designed for high performance style composition

Emotion logo

emotion

The Next Generation of CSS-in-JS

Emotion 11 has been released 🚀 See the blog post

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov @emotion/css size @emotion/css gzip size @emotion/react size @emotion/react gzip size @emotion/styled size @emotion/styled gzip size slack

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:

Quick Start

Get up and running with a single import.

npm install --save @emotion/react
/** @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

Ecosystem

In the Wild

Sponsors

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

Thinkmill

Backers

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

Contributors

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