Updated

Technology · Web Development

Emotion

emotion.sh
Open source

Emotion is a library for writing CSS styles with JavaScript. It supports string and object styles, and it offers a framework-agnostic package and one for React.[1]

Emotion is a flexible and performant library designed for writing CSS styles with JavaScript. It provides a powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Emotion allows for writing styles using string or object notation and supports both styled components and the css prop for styling elements. Its framework agnostic nature means it can be used with various frameworks or even without one, making it a versatile choice for styling modern web applications.

Emotion belongs toDevelopmentJavaScript frameworkscategories.

What it is

A library for writing CSS with JavaScript[1]

Two ways to use it

A framework-agnostic package, or one for React[1]

Server rendering

Zero configuration with the React package[1]

License

MIT[2]

96websites

use it — 3.8% of the 2,560 websites we scanned in the last 12 months

#5of 47

tools in its category seen in our scans (we recognize 179)

14public pages

on UptimeCard — open any of them to see how that site is doing

In short: a CSS-in-JS library that works with or without React; the React package suits builds you can configure, and the framework-agnostic one needs no setup.[1]

4.1% of all websites we track run Emotion▼ 0.01 points since 20 Sep

Should you use Emotion?

The 10-second version, from the vendor’s own pages and what we see in our scans

Emotion fits if…

  • You build with React and want to style components with a css prop or styled components[1]
  • You want CSS-in-JS without a framework or build configuration[1]

Look elsewhere if…

  • You prefer utility classes in your markup[3]Tailwind CSS describes itself this way.
  • You want one API that covers server and client components[4]styled-components describes itself this way.
Server-side rendering with the framework-agnostic package needs extra work[1]

Emotion next to other ways to style a web interface

Statements come from each project's own page; website counts and speed are ours.

Emotionstyled-componentsTailwind CSS
Approach
What it isCSS in JavaScriptstring and object styles[1]Styling for Reactfast, expressive[4]Utility-first CSSclasses in your markup[3]
What we see in our scans
Websites running it963.8% of 2,560 scanned sites843.3% of 2,560 scanned sites2088.1% of 2,560 scanned sites
Typical page load time2.9 s8 public sites2.6 s✓15 public sites4.0 s155 public sites
Typical page weight4.1 MBtypical home page2.6 MB✓typical home page3.4 MBtypical home page

Scan rows count public pages only; a tool needs at least 5 measured sites to appear.

  • styled-components: Styling for React with components, server rendering and React Native[4]
  • Tailwind CSS: A utility-first CSS framework where classes go directly in your markup[3]

Choose Emotion if…

  • You want CSS in JavaScript with or without React[1]

Choose styled-components if…

  • You style React components with one API[4]

Choose Tailwind CSS if…

  • You want utility classes in your markup[3]

Support and help for Emotion

How the vendor says you can reach it, and the public help community

Stack Overflow

612 questions[9]

[emotion] questions

Emotion versions

The newest release, the series that still gets fixes, and what changed

Latest release

11.14.0[2][5]

Released 9 Dec 2024

Maintained series

11

What changed in 11.14

  • The latest minor release moved the source code to TypeScript, so type declarations are now generated from it[6]

What changed in 11.10

  • This release added an exports field that limits which files can be imported from the package[7]

What changed in 11.0

  • This major release renamed @emotion/core to @emotion/react[8]

What Emotion sites add on top

How many of the 96 Emotion sites we scanned also run each tool, grouped by what the tool does

Tag manager

Google Tag Manager
58%56 sites

Analytics

Google Analytics
45%43 sites
Facebook Pixel
24%23 sites
Linkedin Insight Tag
12%11 sites

Cookie consent

OneTrust
37%35 sites

Online store

Cart Functionality
15%14 sites

The full bar means every Emotion site. A site can run several tools for one job, so the shares of tools in one group can add up to more than 100%.

How Emotion sites protect themselves

Share of the 96 sites we scanned that run each protection

HSTS77% · 74 sites

HTTP Strict Transport Security (HSTS) informs browsers that the site should only be accessed using HTTPS

reCAPTCHA31% · 30 sites

reCAPTCHA is a free service from Google that helps protect websites from spam and abuse

Akamai Bot Manager20% · 19 sites

Akamai Bot Manager detect bots using device fingerprinting bot signatures

Protections add up, they do not replace each other: a site can run all of them.

At a glance

UptimeCard's own scans and tests of 2,560 websites · refreshed weekly

How Emotion sites scoreout of 100 · hover or tap a score for details

36PerformancePooraverage site: 5090AccessibilityGoodaverage site: 8974Best practicesFairaverage site: 9389SEOGoodaverage site: 92

Page load time

Loads about 33% faster than the average site

Emotion sites
2.9 s
All sites
4.3 s

Most Emotion sites load in 2.1–4.8 s. Home page weight: 4.1 MB vs 3.3 MB for all sites. 8 public sites measured.

Who uses it?

Technology and Software is the biggest group

Technology and Software71%
Business Services14%
Fintech Solutions7%
Software as a Service (SaaS)7%

Share of 14 classified public sites. “× average” compares with all 961 public sites.

How Emotion sites are built

Closest partners. The number says how many times more often the tool runs on Emotion sites than on an average website. Hover a partner for its share of sites.

MUI25×Apollo8×GraphQL8×TypeScript5×Next.js4×Akamai Bot Manager3×React3×Node.js3×Contentful3×

Stacks we see most. Tools that tend to run together with Emotion on the same websites. The percentage is the share of all 96 Emotion sites that run the whole stack.

6 stacks · swipe, drag or use the arrows
#1

Emotion + React + Next.js + Amazon CloudFront + AWS Certificate Manager

11.5%11 of 96 sites
#2

Emotion + React + Next.js + DigiCert + Akamai

9.4%9 of 96 sites
#3

Emotion + React + Next.js + OneTrust + Sentry

6.3%6 of 96 sites
#4

Emotion + OneTrust + Amazon CloudFront + Sentry + AWS Certificate Manager

5.2%5 of 96 sites
#5

Emotion + React + PayPal

6.3%6 of 96 sites
#6

Emotion + Google Sign-in + Funding Choices

4.2%4 of 96 sites

Similar tools in its category

Development: 179 tools known, 47 seen in our scans

Vue.js144 sitesAlternativeGSAP139 sitesAlternativeAngularJS64 sitesAlternativeTurbopack52 sitesAlternativeNuxt.js47 sitesAlternativeAdobe Client Data Layer47 sitesAlternativeAlpine.js33 sitesAlternativeNext.js App Router31 sitesAlternativeReact645 sitesUsed togetherNext.js375 sitesUsed togetherstyled-components84 sitesUsed together

How websites combine Emotion with other tools

Relationships found on the websites that use it, from the same map status pages show.

Needs another tool 7Overlaps with another 4Integrates with another 3Complements another tool 2

Websites using Emotion

96 websites use Emotion: 3.8% of the 2,560 websites we scanned in the last 12 months. A selection is shown below.

Scores are out of 100: P Performance · A Accessibility · B Best practices · S SEO. Green 80+, yellow 65–79, orange 50–64, red below 50. The dot shows whether our last scan found the site failing (red) or not (green); Red, amber or blue: an active incident on the site's status page (outage, degraded, maintenance) or a failing scan; amber also means a certificate ending within 30 days. Hover the dot for details.

Who is behind Emotion

From its own pages and public records, with sources

Its story

  1. 2017

    The Emotion repository was created on GitHub in May 2017. The CSS-in-JS library began as an open source project under the MIT license.[10]

  2. 2020

    Emotion 11 renamed its packages, moved theming into @emotion/react and overhauled the TypeScript types. It also switched internals to hooks for a smaller bundle.[11][8][12]

  3. 2022

    A 2022 release added an exports field to package.json. The field limits which files can be imported and adds a worker condition for bundlers targeting worker-like environments.[13][7]

  4. 2024

    A December 2024 release moved Emotion's source code to TypeScript. Type declarations are now emitted from the source instead of being written by hand, which keeps them in step with the code.[5][6]

Questions about Emotion

What is Emotion?
A library designed for writing CSS styles with JavaScript. It provides powerful and predictable style composition.[1]
Does Emotion need React?
No. The @emotion/css package is framework agnostic, and @emotion/react is for React.[1]
Which style formats does it support?
Both string and object styles are supported.[1]
How many websites use Emotion?
We found Emotion on 96 of the 2,560 websites we scanned in the last 12 months (3.8%). 14 of them have a public status page.
What is Emotion often used with?
Among the websites we scan, Emotion is often found alongside React (83.3% of its sites), Next.js (60.4% of its sites), Node.js (57.3% of its sites).
What are the alternatives to Emotion?
Other development tools we recognize include React, Next.js, Vue.js, GSAP.

Is your website built with Emotion?

UptimeCard checks it around the clock, tells you the minute it stops answering, and gives your visitors a status page.

Monitor my site freeCreate a status page