[bug]: Installation fails with Next.js 15 and/or React 19

[TaifurIslamAshraf]

Describe the bug

While initializing a new Next.js project with shadcn-ui using npx shadcn@latest init, the installation fails when attempting to install dependencies. The error occurs because @radix-ui/react-icons has a peer dependency requirement for "react@^16.x || ^17.x || ^18.x", but the project is using React 19.0.0-rc-69d4b800-20241021.

Error message: npm error ERESOLVE unable to resolve dependency tree npm error Found: [email protected] npm error Could not resolve dependency: npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]

Current environment:

• Next.js 15
• React 19.0.0-rc-69d4b800-20241021
• npm (latest version)
• shadcn-ui (latest version)

The installation works fine with React 18, suggesting that @radix-ui/react-icons needs to be updated to support React 19 release candidates.

Potential solutions:

1. Update @radix-ui/react-icons peer dependencies to include React 19
2. Add a note in the documentation about React 19 compatibility
3. Add a version check in the CLI to warn users about React 19 compatibility issues

Affected component/components

shadcn-ui installation fails

How to reproduce

Steps to reproduce:

1. Create a new Next.js project with experimental features:
   ```bash
   npx create-next-app@latest my-app --typescript --tailwind --app

2. During the setup, select 'yes' for App Router and other default options

3. Navigate to the project directory: bash cd my-app

4. Try to initialize shadcn-ui: bash npx shadcn@latest init

5. Select configuration options:

   • Style: New York
   • Base color: Neutral
   • CSS variables: Yes

6. The installation will fail during the dependency installation step with the following error:

   npm error ERESOLVE unable to resolve dependency tree npm error Found: [email protected] npm error Could not resolve dependency: npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]

You can verify the React version in your package.json: { "dependencies": { "react": "19.0.0-rc-69d4b800-20241021", "react-dom": "19.0.0-rc-69d4b800-20241021" } }

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

System Information:

Operating System:
- Windows 8
- Working in Command Prompt

Node Environment:
- Node.js version: v20.17.0
- npm version: v10.9.0

Project Dependencies:
- Next.js: 15
- React: 19.0.0-rc-69d4b800-20241021
- React DOM: 19.0.0-rc-69d4b800-20241021
- Typescript: ^5
- Tailwind CSS: ^3.4.1

CLI Versions:
- create-next-app: latest
- shadcn-ui CLI: latest (@shadcn/ui)

Additional Context:
- Fresh installation with default configurations
- Using App Router
- Project created with TypeScript and Tailwind CSS enabled

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[Gitstar-OC]

Yeah, it is also coming for me do you got any solution ?

[Gitstar-OC]

I need this urgently, is there any other solution for this ?

[Gitstar-OC]

Do you need a temporary solution for this ?

[needim]

you can use overrides for a temporary fix.

"overrides": {
	"react": "$react",
	"react-dom": "$react-dom"
}

[!WARNING]
This is just a temporary fix!

[vovados1]

You can also use: npm config set legacy-peer-deps true

[Gitstar-OC]

You can also use: npm config set legacy-peer-deps true

No, it did not work for me I tried it. I just cloned old next js project I created in previous week and started using it for development, will change to nextjs 15 after the pr is merged.

[Jacksonmills]

Hey @TaifurIslamAshraf,

I tested out this scenario and was able to get shadcn-ui running smoothly with the New York theme and the @radix-ui/react-icons package.

Here's what I did:

1. Created a repo with npx shadcn/ui@latest init, using New York as the style and including @radix-ui/react-icons.
2. Added some components with npx shadcn/ui@latest add ... and made sure to use some icons from @radix-ui/react-icons.
3. Verified everything ran fine in Next.js 14.
4. Ran the codemod to upgrade: npx @next/codemod@canary upgrade latest.
5. Placed an @radix-ui/react-icons icon on the homepage for testing.

Everything worked both locally and in production without issues.

Prod links: Home page Dashboard page

For reference, here are some key details about my setup:

• Next.js: 15.0.1
• React: 19.0.0-rc-69d4b800-20241021
• React DOM: 19.0.0-rc-69d4b800-20241021
• @radix-ui/react-icons: ^1.3.0
• Tailwind CSS: ^3.4.1
• TypeScript: ^5 package manager: pnpm 9.9.0

"pnpm": {
    "overrides": {
      "@types/react": "npm:[email protected]",
      "@types/react-dom": "npm:[email protected]"
    }
  }

Feel free to check out the repo directly here: GitHub Repo to make sure everything is set up correctly. Let me know if you need more details or if there's anything else I can help test!

[audionai]

i got this like error but u can fix in package.json react version must less that 18; and also react dom less 18;

"devDependencies": {
   "@types/node": "^20", 
   "@types/react": "^18",  <<here
   "@types/react-dom": "^18", <<
   "eslint": "^8",

[Allan2000-Git]

Solution is to install react@18 and react-dom@18. It'll temporarily solve the issue.

[Alienimnida]

I keep getting this error what should I do?

[TaifurIslamAshraf]

I found a solution. Use pnpm package manager

[Alienimnida]

Just using pnpm solves it?

[TaifurIslamAshraf]

Yes

[Jacksonmills]

I guess that's why my setup had no issues then, using pnpm

[Alienimnida]

Nahh man it must be due to the new release ig

[tutorialsmaterials]

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

[shadcn]

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

[shadcn]

@amitb0ra Seems to be a different (permission) issue.

[Jacksonmills]

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

Did you want someone to test on https://github.com/shadcn-ui/ui/pull/5602 or a specific PR? or just on prod?

[shivamByteLab]

You can solve this issue by installing react 18 . I tried and it's working fine for me

[shadcn]

@Jacksonmills prod. thanks.

(Yes it looks like it's working but I have a fix on the way as well)

[raheelk2k]

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

I tried it doesn't

[AnticharppiScalboost]

Same here

Can someone confirm if this it works with pnpm please? pnpm dlx shadcn@latest init

I tried it doesn't

Same here

[Jacksonmills]

What is the output/errors you all are getting?

[AnticharppiScalboost]

What is the output/errors you all are getting?

This is the full error:

I decided to try in a fresh nextjs project.

npx create-next-app test-shadcn

Then install shadcn

npx shadcn@latest init

The above command throws me this error:

Something went wrong. Please check the error below for more details.
If the problem persists, please open an issue on GitHub.

Command failed with exit code 1: npm install tailwindcss-animate class-variance-authority lucide-react @radix-ui/react-icons clsx tailwind-merge
npm error code ERESOLVE
npm error ERESOLVE unable to resolve dependency tree
npm error
npm error While resolving: [email protected]
npm error Found: [email protected]
npm error node_modules/react
npm error   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm error
npm error Could not resolve dependency:
npm error peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/[email protected]
npm error node_modules/@radix-ui/react-icons
npm error   @radix-ui/react-icons@"^1.3.0" from the root project
npm error
npm error Fix the upstream dependency conflict, or retry
npm error this command with --force or --legacy-peer-deps
npm error to accept an incorrect (and potentially broken) dependency resolution.

As temporal fix, it worked to execute this command

[luisbustalu]

Can someone confirm if this it works with pnpm please?

pnpm dlx shadcn@latest init

Works in my side.

[bobbyy16]

Use Nextjs 14

npx create-next-app@14

[shadcn]

Update: https://ui.shadcn.com/docs/react-19. Please take a look and let me know. Thank you.

[Jacksonmills]

Update: https://ui.shadcn.com/docs/react-19. Please take a look and let me know. Thank you.

Tried out the latest changes:

1. npx create-next-app@latest my-app
2. npx shadcn@latest init with --force and --legacy-peer-deps

All good on my end. Just a heads up for docs—if someone uses npm/npx, they'll need to add --force or --legacy-peer-deps whenever they install stuff manually, at least for now. Tried it with pnpm too, and it works the same as before, no issues.

Let me know if there's anything else you want me to check!

[Jacksonmills]

btw it looks like https://github.com/radix-ui/icons/pull/184 got merged so just cmdk it seems