# react-spring

Latest version **10.0.4** (published 2026-05-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-spring
pnpm add react-spring
yarn add react-spring
bun add react-spring
```

## Health

**Score 70/100 (B)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 10.0.4 |
| Published | 2026-05-22 |
| First published | 2018-03-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 7.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 29150 |
| Author | Paul Henschel |
| Maintainers | drcmda, tdfka_rick |
| Keywords | animated, animation, hooks, motion, react, react-native, spring, typescript, velocity |

## Links

- npm: https://www.npmjs.com/package/react-spring
- Repository: https://github.com/pmndrs/react-spring
- Homepage: https://github.com/pmndrs/react-spring#readme
- Issues: https://github.com/pmndrs/react-spring/issues
- npm.io page: https://npm.io/package/react-spring

## Dependencies (6)

- [@react-spring/web](https://npm.io/package/@react-spring/web.md) ~10.1.0
- [@react-spring/core](https://npm.io/package/@react-spring/core.md) ~10.1.0
- [@react-spring/zdog](https://npm.io/package/@react-spring/zdog.md) ~10.1.0
- [@react-spring/konva](https://npm.io/package/@react-spring/konva.md) ~10.1.0
- [@react-spring/three](https://npm.io/package/@react-spring/three.md) ~10.1.0
- [@react-spring/native](https://npm.io/package/@react-spring/native.md) ~10.1.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 10.0.4 (latest) — 2026-05-22
- 10.0.2-beta.0 (beta) — 2025-09-16
- 0.0.0-nightly-52cc710-20230626001840 (nightly) — 2023-06-26
- 0.0.0-65fc02cc281573bc28d90720983c8e9df9035059-20230625170003 (experimental) — 2023-06-25
- 9.4.0-alpha.0 (alpha) — 2021-10-15
- 0.0.0-deprecated (deprecated) — 2021-03-30
- 10.0.3 — 2025-09-18
- 10.0.1 — 2025-05-21
- 10.0.0 — 2025-05-14
- 10.0.0-beta.0 — 2025-04-29
- 9.7.5 — 2024-12-11
- 9.7.4 — 2024-07-21
- 9.7.3 — 2023-09-26
- 9.7.2 — 2023-06-26
- 0.0.0-d80cafe1f0ccd7ce193b8f558285515ede3b8afc-20230625160448 — 2023-06-25
- … 371 more at https://npm.io/package/react-spring/versions

## README

<p align="center">
  <img src="https://i.imgur.com/QZownhg.png" width="240" />
</p>

<br />

<h1 align="center">react-spring</h1>
<h3 align="center">A spring-physics first animation library <br>giving you flexible tools to confidently cast your ideas</h3>

<br>

<p align="center">
  <a href="https://www.npmjs.com/package/react-spring" target="_blank">
    <img src="https://img.shields.io/npm/v/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
  </a>
  <a href="https://www.npmjs.com/package/react-spring" target="_blank">
    <img src="https://img.shields.io/npm/dm/react-spring.svg?style=flat&colorA=000000&colorB=000000" />
  </a>
  <a href="https://discord.gg/ZZjjNvJ" target="_blank">
    <img src="https://img.shields.io/discord/740090768164651008?style=flat&colorA=000000&colorB=000000&label=discord&logo=discord&logoColor=ffffff" alt="Chat on Discord">
  </a>
</p>

<br>

`react-spring` is a cross-platform spring-physics first animation library.

It's as simple as:

```jsx
const styles = useSpring({
  from: {
    opacity: 0
  },
  to: {
    opacity: 1
  }
})

<animated.div style={styles} />
```

Just a small bit about us:

- **Cross-Platform**: We support `react-dom`, `react-native`, `react-three-fiber`, `react-konva` & `react-zdog`.
- **Versatile**: Be declarative with your animations or if you prefer, imperative.
- **Spring-Physics First**: By default animation use springs for fluid interactivity, but we support durations with easings as well.

There's a lot more to be had! Give it a try and find out.

## Getting Started

### ⚡️ Jump Start

```shell
# Install the entire library
npm install react-spring
# or just install your specific target (recommended)
npm install @react-spring/web
```

```jsx
import { animated, useSpring } from '@react-spring/web'

const FadeIn = ({ isVisible, children }) => {
  const styles = useSpring({
    opacity: isVisible ? 1 : 0,
    y: isVisible ? 0 : 24,
  })

  return <animated.div style={styles}>{children}</animated.div>
}
```

It's as simple as that to create scroll-in animations when value of `isVisible` is toggled.

### 📖 Documentation and Examples

More documentation on the project can be found [here](https://www.react-spring.dev).

Pages contain their own [examples](https://react-spring.dev/hooks/use-spring#demos) which you can check out there, or [open in codesandbox](https://codesandbox.io/s/github/pmndrs/react-spring/tree/main/demo/src/sandboxes/card) for a more in-depth view!

---

## 📣 What others say

<p align="middle">
  <img src="assets/testimonies.jpg" />
</p>

## Used by

<p align="middle">
  <a href="https://nextjs.org/"><img width="285" src="assets/projects/next.png"></a>
  <a href="https://codesandbox.io/"><img width="285" src="assets/projects/csb.png"></a>
  <a href="https://aragon.org/"><img width="285" src="assets/projects/aragon.png"></a>
</p>

And [many others...](https://github.com/pmndrs/react-spring/network/dependents)

## Backers

Thank you to all our backers! 🙏 If you want to join them here, then consider contributing to our [Opencollective](https://opencollective.com/react-spring).

<a href="https://opencollective.com/react-spring#backers" target="_blank">
  <img src="https://opencollective.com/react-spring/backers.svg?width=890"/>
</a>

## Contributors

This project exists thanks to all the people who contribute.

<a href="https://github.com/react-spring/react-spring/graphs/contributors">
  <img src="https://opencollective.com/react-spring/contributors.svg?width=890" />
</a>

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