Installation guide for Motion for React

This guide covers everything you need to install and set up Motion for React. We'll cover installation via:

• Package managers like npm, Yarn and pnpm.

• CDN via jsDelivr.

• Frameworks like Next.js and Vite.

Prerequisites

Before you install Motion, note that Motion is only compatible with React versions 18.2 and higher.

Install via package manager

The most common way of installing Motion is via a package manager.

npm

npm install motion

Yarn

yarn add motion

pnpm

pnpm add motion

Once the package is installed, you can import Motion's components and hooks via "motion/react":

import { motion } from "motion/react"

Add via CDN

It's also possible to import Motion directly from an external CDN, without installation. jsDelivr mirrors packages published to npm, so you can import the exact same bundle like this:

<script type="module">
  import motion from "https://cdn.jsdelivr.net/npm/motion@latest/react/+esm"
</script>

Note: The above URL uses the latest version. We recommend replacing this with a fixed version. You can get the latest published version via Motion's jsDelivr package page.

Frameworks

Motion is designed to work seamlessly with modern React frameworks. Here are a few tips for the most popular.

Next.js

Motion supports both the Next.js Page and App Routers.

To use with the App Router, you either need to convert the importing file to a client component with the "use client" directive:

"use client"

import { motion } from "motion/react"

export default function MyComponent() {
  return <motion.div animate={{ scale: 1.5 }} />
}

Or to reduce the amount of JS delivered to the client, you can replace the import with import * as motion from "motion/react-client":

import * as motion from "motion/react-client"

export default function MyComponent() {
  return <motion.div animate={{ scale: 1.5 }} />
}

Vite

No special configuration is needed with Vite. Motion works out of the box!