emotion
The Next Generation of CSS-in-JS
Need support upgrading to Emotion 10? See the migration guide
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
Demo 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
- stylelint - A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- facepaint
- emotion-vue
- 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.
In the Wild
- healthline.com
- nytimes.com
- vault.crucible.gg
- render.com
- gatsbythemes.com
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
Contributors
This project exists thanks to all the people who contribute. [Contribute].
Backers
Thank you to all our backers!
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
