Description
The Next Generation of CSS-in-JS
emotion is a high performance, lightweight css-in-js library.
The core idea comes from Sunil Pai’s glam library and its philosophy is laid out here.
The basic idea is simple.
You shouldn’t have to sacrifice runtime performance for good developer experience when writing CSS. emotion minimizes the runtime cost of css-in-js dramatically by parsing your styles with PostCSS during compilation instead of at runtime.
emotion alternatives and similar libraries
Based on the "PostCSS" category.
Alternatively, view emotion alternatives based on common mentions on social networks and blogs.
-
styled-components
Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅 -
-
-
CSS Layout
A collection of popular layouts and patterns made with CSS. Now it has 100+ patterns and continues growing! -
-
-
-
Aphrodite
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation -
vue-virtual-scroll-list
⚡️A vue component support big amount data list with high render performance and efficient. -
-
-
-
-
-
jTools - Javascript web components
jSuites is a collection of lightweight common required javascript web components. It is composed of fully responsive vanilla plugins to help you bring the best user experience to your projects, independent of the platform. Same JS codebase across different platforms. -
React Inline
DISCONTINUED. Transform inline styles defined in JavaScript modules into static CSS code and class names so they become available to, e.g. the `className` prop of React elements. -
-
-
-
-
File Management with Preview
DISCONTINUED. A file management system built with Vue.js and TypeScript that allows for single and multiple file uploading with a preview feature -
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
A Vue 3 Dynamic and Versatile High Performance Infinite Scroller Component
InfluxDB - Purpose built for real-time analytics at any scale.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of emotion or a related project?
README
emotion The Next Generation of CSS-in-JS
Emotion 11 has been released 🚀 See the blog post
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/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
Examples
- [emotion website](site) [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]
- 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
- nuxt-community/emotion-module - Emotion module for Nuxt.js
- 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.
- monad-ui - Utility First CSS-In-JS
- css-in-js-media - you can deal with responsive design using css-in-js easily with this
css-in-js-mediawhich is similar with include-media - emotion-native-extended - Better styling support for Emotion Native with React Native Extended Stylesheet
In the Wild
- frontity.org
- abacusfi.com
- healthline.com
- nytimes.com
- vault.crucible.gg
- render.com
- gatsbythemes.com
- blazity.com
- postmates.com
- thedisconnect.co
- zefenify.com
- sentry.io
- comparett.com
- Domain.com.au
- cyberhaven.com
- CommercialRealEstate.com.au
- codecademy.com
Sponsors
Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]
Backers
Thank you to all our backers! 🙏 [Become a backer]
Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].