Documentation
Framework Setup Reference
Canonical Motionwind v2 integration entry points and troubleshooting.
Framework Setup Reference
Use the dedicated guide rather than copying an integration from another framework:
| Target | Setup | Runtime |
|---|---|---|
| Next.js or React/Vite | React guide | motion/react |
| Vue/Vite or Nuxt | Vue guide | motion-v |
| Browser JavaScript | Vanilla guide | motion |
| React Native or Expo | React Native guide | react-native-reanimated |
All v2 integrations consume motionwind.config.ts. The React Vite plugin and
Next wrapper receive it directly; Vue's configured transform and plugin share
it; vanilla receives it as motionwind({ config }); React and React Native
runtime trees receive it through MotionwindProvider.
Troubleshooting
Run the diagnostic from the application root:
npx create-motionwind@2 doctorCommon causes:
- The React Vite plugin must run before
@vitejs/plugin-react. - Vue/Vite needs both the template transform and
MotionwindPlugin. - Nuxt uses the globally registered
<Motionwind>component path. - Reanimated's Babel plugin must be enabled for React Native and Metro's cache must be cleared after changing Babel configuration.
- Dynamic animation values need the runtime API; the compiler cannot infer a token constructed entirely at runtime.
- A strict capability error means the selected adapter does not implement that behavior. Use the direct Motion or platform API shown in the compatibility guide instead of suppressing the warning.
The starter applications under starters/ are installable reference projects,
and CI builds them from packed package artifacts rather than workspace links.