@emotion/react

Emotion is a performant and flexible CSS-in-JS library that provides multiple APIs for styling React applications. The @emotion/react package provides the css prop for inline styles (css={{ color: 'red' }} or css={css`color: red`}), while @emotion/styled provides an API similar to styled-components for creating styled React components. Emotion's key advantage is its performance — it generates styles at build time when possible through the Babel plugin, reduces runtime overhead with a highly optimized insertion mechanism, and produces smaller bundles than alternatives. The library supports dynamic styles based on props, theming through ThemeProvider, global styles, keyframe animations, media queries, pseudo selectors, and style composition through the css function. Emotion generates unique class names for style encapsulation and supports server-side rendering with zero configuration in Next.js. The library provides both string-based (template literals) and object-based style authoring. Emotion is the CSS-in-JS solution chosen by many major UI libraries — it powers Chakra UI and MUI's styling engine. While some projects are moving away from runtime CSS-in-JS toward Tailwind or CSS Modules for performance reasons, Emotion remains one of the most capable and flexible styling solutions for React applications.