emotion

The Next Generation of CSS-in-JS.

Last updated 6 years ago by mitchellhamilton .

MIT · Repository · Bugs · Original npm · Tarball · package.json

$ npm install emotion

SYNC missed versions from official npm registry.

emotion

emotion

The Next Generation of CSS-in-JS

core size core gzip size react size react gzip size

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

import { css } from 'emotion'

const app = document.getElementById('root')
const myStyle = css`
  color: rebeccapurple;
`
app.classList.add(myStyle)

React with Optional Babel Plugin

npm install --save emotion react-emotion babel-plugin-emotion

import styled, { css } from 'react-emotion'

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (
  <Container>
    <p className={myStyle}>Hello World</p>
  </Container>
)

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]
govuk-react, a React component library built for UK Government departments
open a PR and add yours!

Ecosystem

facepaint
emotion-vue
ember-emotion
CSS to emotion transform
ShevyJS
design-system-utils - Utilities to give better access to your design system.

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]

Current Tags

11.0.0 ... latest (4 years ago)
11.0.0-next.10 ... next (5 years ago)
11.0.0-rc.0 ... rc (4 years ago)

144 Versions

Maintainers (3)

mitchellhamilton

Downloads

Total 1

Today 0

This Week 0

This Month 0

Last Day 0

Last Week 0

Last Month 0

Dependencies (2)

babel-plugin-emotion ^10.0.0-beta.1
create-emotion ^10.0.0-beta.1

Dev Dependencies (3)

Dependents (16)

© 2010 - cnpmjs.org x YWFE | Home | YWFE