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:
Get up and running with a single import.
npm install --save @emotion/react
The babel plugin is not required, but enables some optimizations and customizations that could be beneficial for your project.
Demo Sandbox
Ecosystem
- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- emotion-vue
- nuxt-community/emotion-module - Emotion module for Nuxt.js
- ShevyJS
- design-system-utils - Utilities to give better access to your design system.
In the Wild
- frontity.org
- abacusfi.com
- vault.crucible.gg
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
- Domain.com.au
- Apache Superset
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Contributors
This project exists thanks to all the people who contribute. [Contribute].