Documentation

React, Vite, and Next.js

Install and configure the stable Motionwind v2 React adapter.

React, Vite, and Next.js

The stable React adapter compiles static animate-* tokens to motion/react props. Runtime parsing is explicit through mw.* or mw.create(Component).

npm install motionwind-react@2 motion motionwind-core@2

Vite

Place Motionwind before the React plugin and pass the typed project config:

// vite.config.ts
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { motionwind } from "motionwind-react/vite";
import motionwindConfig from "./motionwind.config";

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

Next.js

The wrapper adds pre-transform rules for webpack and Turbopack while preserving existing rules and the existing webpack callback:

// next.config.ts
import withMotionwind from "motionwind-react/next";
import motionwindConfig from "./motionwind.config";

export default withMotionwind({}, motionwindConfig);

Transformed files receive the Motion import and client directive they require. Because that changes the React Server Component boundary, keep animated islands small: place classes in a dedicated client-facing component rather than on an otherwise server-only page.

Apply runtime policy

The build plugin reads tokens and presets. Wrap the client-facing application tree with the same config so reduced-motion policy and dynamic components use it too:

"use client";

import { MotionwindProvider } from "motionwind-react";
import config from "../motionwind.config";

export function Providers({ children }: { children: React.ReactNode }) {
  return <MotionwindProvider config={config}>{children}</MotionwindProvider>;
}

Runtime and design-system components

import { mw } from "motionwind-react";
import { Button } from "./button";

const MotionButton = mw.create(Button);

export function App() {
  return (
    <>
      <mw.div className={`animate-enter:opacity-${ready ? "100" : "0"}`} />
      <MotionButton className="animate-hover:scale-105 animate-tap:scale-95">
        Save
      </MotionButton>
    </>
  );
}

mw.create requires the design-system component to forward its ref and DOM props. Static lowercase elements remain the compiler's primary path.

React supports gestures, in-view, scroll-linked animation, drag, layout, variants, SVG, exit props, and reduced motion. Exit still requires Motion's AnimatePresence. See Compatibility for the tested edge cases.