<h2>Introduction</h2>
<p>This guide explains how to integrate shadcn/ui with Next.js 15 and the newly released React 19. It provides detailed steps to ensure a smooth installation and usage, covering potential peer dependency issues and solutions for various package managers such as npm, pnpm, bun, and yarn.</p>
<h2>Installing Dependencies</h2>
<p>To get started, you will need to install the necessary dependencies. Depending on your preferred package manager, you can use the following commands:</p>
<ul>
<li>
<p><strong>npm:</strong></p>
<pre><code class="language-bash">npm install shadcn/ui next@15 react@19 react-dom@19
</code></pre>
</li>
<li>
<p><strong>pnpm:</strong></p>
<pre><code class="language-bash">pnpm add shadcn/ui next@15 react@19 react-dom@19
</code></pre>
</li>
<li>
<p><strong>yarn:</strong></p>
<pre><code class="language-bash">yarn add shadcn/ui next@15 react@19 react-dom@19
</code></pre>
</li>
<li>
<p><strong>bun:</strong></p>
<pre><code class="language-bash">bun add shadcn/ui next@15 react@19 react-dom@19
</code></pre>
</li>
</ul>
<h2>Handling Peer Dependency Issues</h2>
<p>When installing dependencies, npm users might encounter peer dependency errors with React 19. Here are a few approaches to resolve them:</p>
<ul>
<li>
<p><strong>Using the <code>--force</code> flag:</strong></p>
<pre><code class="language-bash">npm install --force shadcn/ui next@15 react@19 react-dom@19
</code></pre>
</li>
<li>
<p><strong>Using the <code>--legacy-peer-deps</code> flag:</strong></p>
<pre><code class="language-bash">npm install --legacy-peer-deps
</code></pre>
</li>
<li>
<p><strong>Downgrading React version:</strong>
If the above methods don’t work, consider downgrading to React 18:</p>
<pre><code class="language-bash">npm install react@18 react-dom@18
</code></pre>
</li>
</ul>
<h2>Turbo Pack for Faster Development</h2>
<p>For an improved development experience, you can leverage Turbo Pack with Next.js 15. Turbo Pack helps speed up the build process significantly, making your development workflow smoother and more efficient.</p>
<h2>Silent Warnings and Errors</h2>
<p>During installation, you might come across silent warnings and errors related to package dependencies. It’s essential to address these issues to prevent runtime problems. The following table tracks the React 19 support status for various shadcn/ui dependencies:</p>
<table>
<thead>
<tr>
<th>Dependency</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>shadcn/ui</td>
<td>Supported</td>
</tr>
<tr>
<td>Next.js 15</td>
<td>Supported</td>
</tr>
<tr>
<td>React 19</td>
<td>Supported</td>
</tr>
</tbody>
</table>
<h2>Conclusion</h2>
<p>By following this guide, you should be able to successfully integrate shadcn/ui with Next.js 15 and React 19, while efficiently handling any dependency issues that arise. Utilizing the solutions provided will ensure a seamless development experience.</p>


Collections

This guide outlines the process of integrating shadcn/ui with Next.js 15 and React 19. It covers the installation of necessary dependencies using different package managers like npm, pnpm, yarn, and bun. It also offers solutions for handling peer dependency issues with React 19, such as using specific npm flags or downgrading to React 18. Additionally, it highlights the use of Turbo Pack for a faster development workflow and addresses common silent warnings and errors related to package dependencies.

Using shadcn/ui with Next.js 15 and React 19