Star

Documentation

Installation

Set up motionwind in your Next.js, Vite, or other React project.

Installation

motionwind works with any React project that supports Babel. The fastest way to get started is the CLI, which auto-detects your project type and wires everything up. You can also set things up manually.

Prerequisites

  • React 18 or newer
  • Motion 11 or newer (the motion package, formerly framer-motion)
  • Node.js 18 or newer

Quick start with the CLI

Run the following command in your project root:

npx create-motionwind

The CLI auto-detects your package manager (npm, yarn, pnpm, or bun) and installs motionwind-react for you. Then follow the manual setup steps below to configure your build tool.

Manual setup: Next.js

1. Install dependencies

npm install motionwind-react motion

2. Update next.config.js

Wrap your Next.js config with the withMotionwind helper. This adds the motionwind Babel plugin as a pre-processing step that runs before SWC — works with both webpack and Turbopack:

import withMotionwind from "motionwind-react/next";

/** @type {import('next').NextConfig} */
const nextConfig = {};

export default withMotionwind(nextConfig);

If you have an existing config with other plugins, wrap the outermost call:

import withMotionwind from "motionwind-react/next";
import withMDX from "@next/mdx";

/** @type {import('next').NextConfig} */
const nextConfig = {
  pageExtensions: ["ts", "tsx", "mdx"],
};

export default withMotionwind(withMDX(nextConfig));

3. Start building

npm run dev

That is all the setup required. The Babel plugin will process every .tsx and .jsx file automatically — both Turbopack (default in Next.js 15+) and webpack are supported out of the box.

Manual setup: Vite

1. Install dependencies

npm install motionwind-react motion

2. Update vite.config.ts

Add the motionwind Vite plugin. It must be placed before the React plugin so it can transform the source before React's JSX transform runs:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { motionwind } from "motionwind-react/vite";

export default defineConfig({
  plugins: [motionwind(), react()],
});

3. Start building

npm run dev

Manual setup: Other bundlers

For any bundler that supports Babel, add the motionwind plugin to your Babel config.

1. Install dependencies

npm install motionwind-react motion

2. Add to Babel config

Create or update a .babelrc file in your project root:

{
  "plugins": ["motionwind-react/babel"]
}

Or if you use babel.config.js:

module.exports = {
  plugins: ["motionwind-react/babel"],
};

Verifying the setup

Create a simple test component to confirm everything is working:

export function TestAnimation() {
  return (
    <button className="px-6 py-3 bg-indigo-600 text-[var(--color-fg)] rounded-lg animate-hover:scale-110 animate-tap:scale-90 animate-spring">
      Hover and tap me
    </button>
  );
}

If the setup is correct, hovering the button will scale it up to 110% and tapping it will scale it down to 90%, both with spring physics. If nothing happens, double-check that:

  1. The Babel plugin is registered in your build config
  2. The component file has a .tsx or .jsx extension
  3. The className is a static string literal (not a template literal or variable)

Using with Tailwind CSS

motionwind is designed to coexist with Tailwind CSS. The animate-* classes are consumed by the Babel plugin at build time and never reach the browser's CSS. Tailwind classes in the same className string pass through unchanged.

No additional Tailwind configuration is needed. However, if Tailwind's JIT compiler warns about unknown animate-* classes, you can suppress the warning by adding them to the safelist or ignoring the animate- prefix in your Tailwind config.

Next steps