Install Motionwind v2

The initializer detects your framework and package manager, installs the published v2 adapter and peers, creates motionwind.config.ts, and only edits a build file when it can do so safely.

npx create-motionwind@2 init --dry-run
npx create-motionwind@2 init

Detection covers Next.js, React/Vite, Vue/Vite, Nuxt, vanilla JavaScript, React Native, and Expo with npm, pnpm, Yarn, or Bun. Use an explicit target when auto-detection is not possible:

npx create-motionwind@2 init --framework=next
npx create-motionwind@2 init --framework=react
npx create-motionwind@2 init --framework=vue
npx create-motionwind@2 init --framework=vanilla
npx create-motionwind@2 init --framework=react-native

The command preserves existing Vite, Next.js, and Babel configuration it cannot merge reliably and prints the exact manual snippet instead. --dry-run never writes files or installs dependencies.

Manual packages

Next, apply the integration for your target:

• React, Vite, and Next.js
• Vue and Nuxt
• Vanilla JavaScript
• React Native and Expo

Tailwind CSS and NativeWind are styling integrations, not required for the animate-* parser itself. Non-animation classes pass through unchanged.

Verify the setup

Run the diagnostic after installation:

npx create-motionwind@2 doctor

On web, verify hover, pointer press, and keyboard focus:

<button
  class="animate-hover:scale-110 animate-tap:scale-90 animate-focus:scale-105 animate-spring"
>
  Test Motionwind
</button>

On React Native, use a supported mw.* component and test a press interaction:

import { mw } from "motionwind-react-native";

<mw.Pressable className="animate-tap:scale-90 animate-spring">
  <mw.Text>Test Motionwind</mw.Text>
</mw.Pressable>;

If setup still fails, compare the project with the installable starter for the same framework and run doctor before filing an issue.