# @emotion/react

> > Simple styling in React.

Latest version **11.14.0** (published 2024-12-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @emotion/react
pnpm add @emotion/react
yarn add @emotion/react
bun add @emotion/react
```

## Health

**Score 55/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high maintenance score; popular repo.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 11.14.0 |
| Published | 2024-12-09 |
| First published | 2020-01-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 797.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 18017 |
| Author | Emotion Contributors |
| Maintainers | tkh44, emotion-release-bot, andarist, emmatown |

## Links

- npm: https://www.npmjs.com/package/@emotion/react
- Repository: https://github.com/emotion-js/emotion.git#main
- Homepage: https://github.com/emotion-js/emotion/tree/main#readme
- Issues: https://github.com/emotion-js/emotion/issues
- npm.io page: https://npm.io/package/@emotion/react

## Dependencies (8)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.18.3
- [@emotion/cache](https://npm.io/package/@emotion/cache.md) ^11.14.0
- [@emotion/utils](https://npm.io/package/@emotion/utils.md) ^1.4.2
- [@emotion/serialize](https://npm.io/package/@emotion/serialize.md) ^1.3.3
- [@emotion/babel-plugin](https://npm.io/package/@emotion/babel-plugin.md) ^11.13.5
- [@emotion/weak-memoize](https://npm.io/package/@emotion/weak-memoize.md) ^0.4.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^3.3.1
- [@emotion/use-insertion-effect-with-fallbacks](https://npm.io/package/@emotion/use-insertion-effect-with-fallbacks.md) ^1.2.0

## Recent versions

- 11.14.0 (latest) — 2024-12-09
- 11.0.0-rc.0 (rc) — 2020-10-11
- 11.0.0-next.10 (next) — 2020-01-05
- 11.13.5 — 2024-11-20
- 11.13.3 — 2024-08-21
- 11.13.0 — 2024-07-20
- 11.12.0 — 2024-07-19
- 11.11.4 — 2024-02-27
- 11.11.3 — 2023-12-23
- 11.11.1 — 2023-06-07
- 11.11.0 — 2023-05-06
- 11.10.8 — 2023-04-28
- 11.10.6 — 2023-02-16
- 11.10.5 — 2022-10-27
- 11.10.4 — 2022-08-30
- … 27 more at https://npm.io/package/@emotion/react/versions

## README

# @emotion/react

> Simple styling in React.

## Install

```bash
yarn add @emotion/react
```

## Usage

```jsx
/** @jsx jsx */
import { jsx, css, Global, ClassNames } from '@emotion/react'

render(
  <div css={{ color: 'hotpink' }}>
    <div
      css={css`
        color: green;
      `}
    />
    <Global
      styles={{
        body: {
          margin: 0,
          padding: 0
        }
      }}
    />
    <ClassNames>
      {({ css, cx }) => (
        <div
          className={cx(
            'some-class',
            css`
              color: yellow;
            `
          )}
        />
      )}
    </ClassNames>
  </div>
)
```

More documentation is available at [https://emotion.sh](https://emotion.sh).

---
_Source: https://npm.io/package/@emotion/react · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._