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 · 212 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.
Dark mode works on the navbar but cards and inputs stay whitesolved
v0 components have no colors in my Next 14 app, bg-background does nothingsolved
v0 project fails on deploy: ERESOLVE unable to resolve dependency tree (react 19)solved

Your answer

Sign in to write an answer