Appsv0

v0 component looks right in v0 but breaks in your project

You copy a component from v0 into your Next.js app and it looks wrong or will not compile. Usually a few pieces are missing: UI components, the import path, Tailwind setup or packages.

  • Difficulty: Easy
  • Time: 15 to 45 minutes
  • Updated October 28, 2026

Symptoms

  • Errors like "Module not found: @/components/ui/button"
  • The layout shows up but has no styling
  • Icons are missing or cause errors
  • The page crashes with an error about hooks or client components

Why it happens

v0 builds components on top of shadcn/ui, Tailwind CSS and a few small packages for icons and class names. Inside v0, all of that is already set up.

Your project may not have the same pieces, or it may have different versions. The component code is usually fine. The setup around it is different.

Try this first

  1. Add the missing UI components

    If the code imports from @/components/ui, add those components to your project with the shadcn command. List the ones the error mentions.

    npx shadcn@latest add button card input

  2. Check the @ import path

    The @ sign is a shortcut to your project folder. It has to be set in tsconfig.json. If your code lives in a src folder, use ./src/* instead.

    {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./*"] }
  }
}

  3. Make sure Tailwind sees the new files

    If the component has no styles, Tailwind may not be looking at the folder where you saved it. Check that your Tailwind setup includes that folder.

  4. Install the small helper packages

    Most v0 components use these. Install them if they are missing.

    npm install lucide-react clsx tailwind-merge

  5. Mark interactive components as client components

    If you use the Next.js app folder and the component uses useState, useEffect or click handlers, add this line at the very top of the file.

    'use client'

When to stop and call a person

Bring in a person if your project uses a different design system, if React or Next.js versions clash, or if you are pasting many v0 screens into one app and they all look slightly different. Making them feel like one product is a design and code job.

Request a repair crew

Questions people ask

Do I need shadcn/ui to use v0 code?

It is the easiest way. You can rewrite the components to use your own UI kit, but that takes more work.

Why do my v0 pages all look a bit different?

Each generation picks its own spacing and sizes. Set shared styles and reuse the same components across pages to make them match.

Related fixes

v0 Easy

v0 design looks fine on desktop but breaks on mobile

Your v0 screens look great on a laptop and fall apart on a phone: text runs off the screen, cards squeeze together…