All Projects โ†’ emotion-js โ†’ Emotion

emotion-js / Emotion

Licence: mit
๐Ÿ‘ฉโ€๐ŸŽค CSS-in-JS library designed for high performance style composition

Programming Languages

javascript
184084 projects - #8 most used programming language
typescript
32286 projects

Projects that are alternatives of or similar to Emotion

Xwind
Tailwind CSS as a templating language in JS and CSS-in-JS
Stars: โœญ 249 (-98.24%)
Mutual labels:  babel-plugin, css-in-js, emotion
Horror
๐Ÿ˜ฑ React HTML elements with CSS-in-JS
Stars: โœญ 78 (-99.45%)
Mutual labels:  css-in-js, emotion
Flame
Component library for building Lightspeed products
Stars: โœญ 65 (-99.54%)
Mutual labels:  css-in-js, emotion
Css In React
๐Ÿญ CSS in React - Learn the best CSS in JS frameworks by example
Stars: โœญ 101 (-99.29%)
Mutual labels:  css-in-js, emotion
Postjss
Use the power of PostCSS in compiling with JSS
Stars: โœญ 40 (-99.72%)
Mutual labels:  babel-plugin, css-in-js
Emotion Module
๐Ÿ’– Emotion module for Nuxt.js
Stars: โœญ 47 (-99.67%)
Mutual labels:  css-in-js, emotion
Onno
Responsive style props for building themed design systems
Stars: โœญ 95 (-99.33%)
Mutual labels:  css-in-js, emotion
Design System Utils
๐Ÿ‘ฉโ€๐ŸŽจ Access your design tokens with ease
Stars: โœญ 465 (-96.72%)
Mutual labels:  css-in-js, emotion
React Next Boilerplate
๐Ÿš€ A basis for reducing the configuration of your projects with nextJS, best development practices and popular libraries in the developer community.
Stars: โœญ 129 (-99.09%)
Mutual labels:  css-in-js, emotion
Next Dark Mode
๐ŸŒ‘ Enable dark mode for Next.js apps
Stars: โœญ 133 (-99.06%)
Mutual labels:  css-in-js, emotion
Filbert Js
A lightweight(~1kb) css-in-js framework
Stars: โœญ 167 (-98.82%)
Mutual labels:  css-in-js, emotion
Styled System
โฌข Style props for rapid UI development
Stars: โœญ 7,126 (-49.74%)
Mutual labels:  css-in-js, emotion
Styled Tools
Useful interpolated functions for CSS-in-JS
Stars: โœญ 761 (-94.63%)
Mutual labels:  css-in-js, emotion
Snackui
SnackUI ๐Ÿ‘ - the final React style library. With an *optimizing compiler* that lets you write views naturally, with easier DX, working on native and web at once, all while being faster than hand-rolling your own CSS.
Stars: โœญ 55 (-99.61%)
Mutual labels:  babel-plugin, css-in-js
Facepaint
Responsive style values for css-in-js.
Stars: โœญ 523 (-96.31%)
Mutual labels:  css-in-js, emotion
Compiled
A familiar and performant compile time CSS-in-JS library for React.
Stars: โœญ 1,235 (-91.29%)
Mutual labels:  babel-plugin, css-in-js
Grid
This package has moved and renamed
Stars: โœญ 2,079 (-85.34%)
Mutual labels:  css-in-js, emotion
Twin.macro
๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.
Stars: โœญ 5,137 (-63.77%)
Mutual labels:  css-in-js, emotion
Styled Breakpoints
Simple and powerful tool for creating breakpoints in styled components and emotion. ๐Ÿ’…
Stars: โœญ 428 (-96.98%)
Mutual labels:  css-in-js, emotion
Xstyled
A utility-first CSS-in-JS framework built for React. ๐Ÿ’…๐Ÿ‘ฉโ€๐ŸŽคโšก๏ธ
Stars: โœญ 1,835 (-87.06%)
Mutual labels:  css-in-js, emotion

Emotion logo

emotion

The Next Generation of CSS-in-JS

Emotion 11 has been released ๐Ÿš€ See the blog post

Backers on Open Collective Sponsors on Open Collective npm version Build Status codecov @emotion/css size @emotion/css gzip size @emotion/react size @emotion/react gzip size @emotion/styled size @emotion/styled 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/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

Demo Code Sandbox

Examples

Ecosystem

In the Wild

Sponsors

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

Thinkmill

Backers

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

Contributors

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].