Installing shadcn/ui on Next.js 15 RC

[tjhoo]

Hi,
I encouter the following issue when installing shadcn/ui in a Next.js 15 RC.

$ npx create-next-app@rc --empty dummy
√ Would you like to use TypeScript? ... No / Yes
√ Would you like to use ESLint? ... No / Yes
√ Would you like to use Tailwind CSS? ... No / Yes
√ Would you like to use `src/` directory? ... No / Yes
√ Would you like to use App Router? (recommended) ... No / Yes
√ Would you like to use Turbopack for next dev? ... No / Yes
√ Would you like to customize the default import alias (@/*)? ... No / Yes
...
$ npx shadcn-ui@latest init
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Slate
√ Would you like to use CSS variables for colors? ... no / yes
...
Command failed with exit code 1: npm install tailwindcss-animate class-variance-authority clsx tailwind-merge lucide-react
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-f994737d14-20240522" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.5.1 || ^17.0.0 || ^18.0.0" from [email protected]
npm ERR! node_modules/lucide-react
npm ERR!   lucide-react@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
...

How can we specify --force option when installing shadcn/ui? Or is there a better way to workaround this?

[rogueturnip]

Has anyone found a way to run --force or --legacy-peer-deps on the init?

[yahyazgour]

Hello @tjhoo @rogueturnip

I was able to make it work on rc using either npx --force shadcn-ui@latest init or npx --legacy-peer-deps shadcn-ui@latest init

You might also have to apply the same thing to:
1 - some Shadcn components or v0.dev components like npx --legacy-peer-deps v0 add 5NuVtmUwLid.
2 - some @radix-ui packages, had the issue with react-dialog and fixed it through npm --legacy-peer-deps i @radix-ui/react-dialog

[jakubiwaszkiewicz]

Thanks! In my case I had to run npx --legacy-peer-deps shadcn@latest init -d instead of npx --legacy-peer-deps shadcn-ui@latest init

[atulbhatt-system32]

Yeah I had the same experience:
https://youtu.be/8NiSPKK29ig

[atulbhatt-system32]

Now shadcn also prompts for this before installing.

[atulbhatt-system32]

https://youtu.be/8NiSPKK29ig

here's the video on the same. Just in case ;)

[kirankumarhexafoldtech]

npx --legacy-peer-deps shadcn@latest init will works fine

[BrunoPierca]

Just in case, this same command will work when adding components too

[tutorialsmaterials]

check the blog solve this problem
https://tutorialsmaterial.com/post/ShadCn-Nextjs-15

[k1rana]

That blog posts seem to be written without intention

[pasternak-karmel]

You have just to install this npm install tailwindcss-animate class-variance-authority clsx tailwind-merge before doing npx shadcn@latest init

[Ngumi22]

This worked well for me. I ran this first npm install tailwindcss-animate class-variance-authority clsx tailwind-merge and then npx shadcn@latest init and no errors at all

[atulbhatt-system32]

@radix-ui/[email protected] fails at here

[Ngumi22]

I realised you have to add this also every time --legacy-peer-deps when installing all packages so I went back to Next 14 for now until everything is okay

[atulbhatt-system32]

Yes I have been doing this : https://youtu.be/8NiSPKK29ig

[Ngumi22]

That seems to be the only solution at the moment.