# emotion-js/emotion

👩‍🎤 CSS-in-JS library designed for high performance style composition

Repository: https://github.com/emotion-js/emotion
Canonical: https://ross.abutalabs.com/products/emotion
Homepage: https://emotion.sh/
Language: JavaScript
License: MIT
License Family: permissive
Topics: css-in-js, babel-plugin, react, reactjs, css, emotion
Last push: 2026-08-26T21:27:16+00:00

## Health v2 (maintenance only)
Score: 84/100 (v2, computed 2026-09-03T02:20:16.233290+00:00)
- activity 99, release rhythm 55, longevity 100
- inputs: {"age_days": 3385, "days_push": 7, "days_rel": 302, "gap_med": 0.0, "n_releases_24m": 19}
- flags: none
- formula: round(0.45*activity + 0.35*rhythm + 0.20*longevity); archived -> min(score, 10)

## Adoption (not part of the score)
Stars 18016, forks 1140 (observed 2026-08-28T04:11:20.871607+00:00)

## What it is
Emotion is a high-performance CSS-in-JS library for writing CSS styles with JavaScript, supporting both string and object styles with predictable composition. It offers a framework-agnostic package (@emotion/css) and a React-focused package (@emotion/react) with css prop, styled API, theming, and server-side rendering support.

## Use cases
- style React components with a css prop instead of stylesheets
- create styled components with props-based dynamic styling
- compose CSS styles without specificity conflicts
- write framework-agnostic CSS-in-JS with generated class names
- server-side render styles for a React app
- set up theming for a component library
- inject global styles like resets and font faces
- define keyframe animations in JavaScript

## When to choose
- you want performant CSS-in-JS with heavy production caching
- you need both string template and object style syntaxes
- you want first-class React integration with css prop and styled APIs
- you need SSR support with critical style extraction
- you want source maps, labels, and testing utilities for styling

## When to avoid
- you prefer plain CSS files or CSS Modules without runtime overhead
- your project cannot configure Babel and you need full css prop optimization
- you want a zero-runtime styling solution
- you are not using a JavaScript bundler/build environment

## Facets
- artifact type: library
- maturity: stable
- function: css-framework, ui-components, frontend-framework, templating
- domain: web-development, frontend, web-design
- platform: browser, cross-platform
- tags: css-in-js, react, styled-components, babel-plugin, server-side-rendering, theming, nodejs

## Member repositories
- emotion-js/emotion (main) score 84

## Provenance
- Observed fields: from GitHub, fetched 2026-08-28T04:11:20.871607+00:00.
- Health v2: computed from the inputs above; adoption is never an input.
- Inferred fields (summary, facets, guidance): AI-extracted, prompt v1, taxonomy v1, on 2026-08-29T17:02:10.941958+00:00, confidence not recorded.
  - readme: https://github.com/emotion-js/emotion (fetched 2026-08-28T04:11:20.871607+00:00, sha 26f4589bbe0c)
  - homepage: https://emotion.sh/ (fetched 2026-08-29T08:00:46.521390+00:00, sha c2795e6abe60)
  - site_page: https://emotion.sh/docs (fetched 2026-08-29T08:00:46.530803+00:00, sha c2795e6abe60)
  - site_page: https://emotion.sh/docs/community (fetched 2026-08-29T08:00:46.532693+00:00, sha 175613520cf7)
  - site_page: https://emotion.sh/docs/@emotion/css (fetched 2026-08-29T08:00:46.534382+00:00, sha 86199b6180a0)
  - site_page: https://emotion.sh/docs/ssr (fetched 2026-08-29T08:00:46.536170+00:00, sha bf84cce05cde)
  - site_page: https://emotion.sh/docs/css-prop (fetched 2026-08-29T08:00:46.538025+00:00, sha bb340a0ba609)
  - site_page: https://emotion.sh/docs/styled (fetched 2026-08-29T08:00:46.539816+00:00, sha 2a1916f567d0)
  - site_page: https://emotion.sh/docs/install (fetched 2026-08-29T08:00:46.541570+00:00, sha 25879b42eeb6)
  - site_page: https://emotion.sh/docs/composition (fetched 2026-08-29T08:00:46.543257+00:00, sha 03a86762f889)
- Data as of 2026-08-30T08:39:29.467469+00:00.