Troubleshooting

Common Issues

1. Missing Tailwind CSS Config

If styles or animations appear unstyled, make sure your tailwind.config.ts includes the component path:

content: [
  "./pages/**/*.{ts,tsx}",
  "./components/**/*.{ts,tsx}",
  "./app/**/*.{ts,tsx}",
  "./src/**/*.{ts,tsx}",
],

2. Motion / Framer Motion Import Errors

Viora UI uses motion/react (Motion v12+) or framer-motion. Ensure you have installed motion:

npm install motion

3. Server vs. Client Components

Many interactive components require React state or effects. If you see hooks errors in Next.js App Router, ensure the "use client" directive is present at the top of the file:

"use client";

4. Hydration Mismatch

For components with randomly generated numbers or timestamps, use a mounted state check to avoid SSR hydration mismatches.