Installing shadcn/ui with Next.js 15 and React 19 Compatibility.
Guide to installing shadcn/ui with Next.js 15 and React 19, addressing common compatibility issues and solutions.
Hi there 👋,
Welcome back to another enlightening journey into the modern web development landscape. Today, we’re diving deep into the realm of integrating shadcn/ui with the latest Next.js 15 and React 19. 🚀
📑 In this tutorial, we’ll explore how to overcome compatibility challenges and set up shadcn/ui seamlessly with these cutting-edge technologies. Ready to take your projects to the next level? Let’s jump right in! 🎉
The recent release of Next.js 15 and the React 19 marks a major milestone in the web development world. Next.js 15 continues to build on its strengths by introducing performance optimizations, improved support for edge functions, and enhanced development workflows. Meanwhile, React 19 brings a host of exciting updates, including improvements to server components, concurrent rendering enhancements, and the eagerly anticipated React Server Actions.
However, the rapid evolution of these tools can pose challenges. Many popular npm packages rely on peer dependencies, which are specific versions of libraries like React. With React 19 being a release candidate, some packages have yet to update their peer dependencies, leading to compatibility issues during installation. ⚠️
Common Compatibility Issues
Compatibility problems arise when packages enforce strict version requirements for React. For instance, trying to use React 19 with a package that only supports React 18 can result in errors like:
These errors can be frustrating, especially when exploring the latest features of Next.js and React.
Installation Strategies (Solutions)
Option 1: Force Installation
To bypass dependency warnings, you can use the following flags:
These flags tell npm to ignore peer dependency warnings and install the package anyway.
Option 2: Temporary Downgrade
If you’re not ready to address compatibility issues, you can temporarily downgrade to React 18:
This ensures compatibility with most packages until they update their peer dependencies.
Standard Installation
If you’re using pnpm, bun, or yarn, the standard shadcn/ui installation guide works without extra flags. For npm users, follow these steps:
- Run the initialization command:
- During the process, you’ll be prompted to handle peer dependency issues. Choose one of the following:
- Select your preferred option, and the CLI will take care of the rest.
Component Compatibility
To ease your setup, here’s a compatibility matrix for shadcn/ui dependencies:
✅ Fully Compatible:
- radix-ui
- lucide-react
- class-variance-authority
- tailwindcss-animate
- embla-carousel-react
- recharts
- react-hook-form
- react-resizable-panels
- sonner
- react-day-picker
- input-otp
- vaul
🚧 Requires Flags:
- @radix-ui/react-icons (pending PR for React 19 compatibility)
Special Case: recharts
If you use recharts, override its react-is dependency in your package.json:
Wrapping Up
Transitioning to Next.js 15 and React 19 is a significant step forward in modern web development. While compatibility issues may arise, they are temporary and manageable. By following the strategies explained above, you can.
Remember, the ecosystem evolves rapidly, and library maintainers are working diligently to ensure compatibility. Stay informed, test thoroughly, and embrace the power of modern web tools to push the boundaries of what’s possible. Happy coding! 🚀
I appreciate you taking the time to read this article.🙌
Before you move on to explore the next article, don’t forget to give your claps 👏 for this article and share with your friends. Stay connected with me on social media. Thanks for your support and have a great rest of your day! 🎊
✍️ Vinojan Veerapathirathasan.