Skip to content

πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition

License

Notifications You must be signed in to change notification settings

arturmuller/emotion

This branch is 4 commits ahead of, 175 commits behind emotion-js/emotion:main.

Folders and files

NameName
Last commit message
Last commit date

Latest commit

8d40db7 Β· Apr 5, 2022
Apr 5, 2022
Mar 30, 2021
Mar 4, 2022
Sep 20, 2020
Mar 10, 2022
May 24, 2021
Mar 31, 2022
Feb 19, 2022
Feb 19, 2022
Mar 10, 2022
Feb 19, 2022
Jul 13, 2018
Jul 5, 2020
Jul 5, 2020
Apr 10, 2021
Nov 14, 2021
Mar 30, 2021
Jan 31, 2018
May 24, 2021
Jul 6, 2018
May 9, 2019
May 24, 2021
Nov 1, 2021
Dec 22, 2019
Oct 3, 2021
May 9, 2019
Nov 9, 2020
May 24, 2021
Jul 10, 2017
Feb 19, 2022
Feb 19, 2022
Feb 19, 2022
Feb 14, 2019
Feb 19, 2022
Feb 19, 2022

Repository files navigation

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.

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].

About

πŸ‘©β€πŸŽ€ CSS-in-JS library designed for high performance style composition

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 94.4%
  • TypeScript 5.4%
  • Other 0.2%