Skip to content
πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition
JavaScript TypeScript HTML
Branch: master
Clone or download
Pull request Compare This branch is 3 commits behind emotion-js:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.changeset
.circleci
.github
__mocks__
docs
flow-typed/npm
packages
playgrounds
scripts
site
test
.eslintignore
.flowconfig
.flowconfig-ci
.gitignore
.nvmrc
.prettierignore
.prettierrc.yaml
.yarnrc
CHANGELOG.md
CODE_OF_CONDUCT.md
CONTRIBUTING.md
LICENSE
README.md
RELEASING.md
babel.config.js
codecov.yml
emotion.png
jest.config.js
jest.dist.js
netlify.toml
package.json
yarn.lock

README.md

emotion

emotion

The Next Generation of CSS-in-JS

Need support upgrading to Emotion 10? See the migration guide

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov core size core gzip size react size react gzip size slack spectrum

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/core
/** @jsx jsx */
import { jsx } from '@emotion/core'

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

Contributors

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

Backers

Thank you to all our backers! πŸ™ [Become a backer]

Sponsors

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

You can’t perform that action at this time.