Keyboard shortcuts

jk
move through the list
↵
open the selected item
a
ask a question
nucw
tabs: new, unanswered, active, top
⌘↵
post the answer you are writing
/or⌘K
search
t
switch theme
?
this list
AskVibe
AskSign in
Demo, all content is generated
Question

Module not found: Can't resolve '@/components/ui/card' after copying a v0 component

Solved · 219 views · asked by anouk · edited
v0nextjsreacttailwind

I have a Next 15 app I started with create-next-app (no shadcn). Made a pricing section in v0, copied the code from the code tab into app/pricing/page.tsx. Now:

Module not found: Can't resolve '@/components/ui/card'
> 3 | import { Card, CardContent, CardHeader } from "@/components/ui/card"

There is no components/ui folder in my project. Where does v0 expect that to come from?

What I’ve tried

Created an empty components/ui/card.tsx file which obviously didn't work, and searched npm for a 'card' package, there are like 50 of them.

Comment
Do you have a components.json in the project root? That decides which route is easiest. mei_lin · edited
no components.json, it's a plain create-next-app anouk · edited

3 answers

Marked as helpful by the asker
mei_lin · edited

v0 builds on shadcn/ui. Those components/ui/* files are not a package, they are source files that shadcn copies into your project. v0 has them in its sandbox, your repo doesn't.

Fix, in your project root:

npx shadcn@latest init
npx shadcn@latest add card button badge

init creates components.json, lib/utils.ts (the cn() helper) and adds the CSS variables to globals.css. Then add drops card.tsx etc. into components/ui/.

Easier alternative: v0 shows an npx shadcn add "https://v0.dev/chat/b/..." command under the Add to Codebase button. That one pulls the component and all its ui dependencies in one go.

Also check tsconfig.json has "paths": { "@/*": ["./*"] }, otherwise the @/ alias won't resolve either.

Comment
The init + add worked. It asked me about overwriting globals.css, I said yes, hope that was ok anouk · edited
Fine on a fresh create-next-app. On a project with your own styles in there, say no and merge by hand. mei_lin · edited
sofia_gr · edited

One more thing that bites people: check which Tailwind version you're on. v0 now outputs Tailwind v4 style (@theme inline in the css). If your project is on v3 with a tailwind.config.ts, the classes like bg-card won't have colors even after the import works.

Comment
kenji_w · edited

If it's really only the one card, you can also copy card.tsx from the shadcn docs into components/ui/ by hand. The CLI is less error-prone though, it also sets up cn() for you.

Comment

Related

shadcn buttons render as plain text, no styles at allsolved
Tailwind v4 classes from my packages/ui folder don't apply in the Next app0 ans.
v0 components have no colors in my Next 14 app, bg-background does nothingsolved
Dark mode works on the navbar but cards and inputs stay whitesolved
v0 project fails on deploy: ERESOLVE unable to resolve dependency tree (react 19)solved

Your answer

Sign in to write an answer