Does shadcn-ui work with Next.js 15 and React 19?

Yes, but you may need to use the --force or --legacy-peer-deps flag during installation if certain Radix primitives haven't updated their peer dependency ranges yet.

Can shadcn components be Server Components?

Most shadcn components rely on Radix UI for interactivity, meaning they must remain Client Components via the 'use client' directive.

How do I initialize shadcn in a Next.js 15 project?

Use 'npx shadcn@latest init' to ensure you are using the latest CLI version that supports the updated Next.js directory structure and Tailwind v4 configurations.

Will shadcn-ui slow down my Next.js App Router performance?

No, because shadcn is code-based rather than library-based, it allows for better tree-shaking and only ships the CSS/JS you actually use.

Shadcn/ui+Nextjs 15 Server Components

Compatibility analysis and integration guide

Shadcn/ui

Nextjs 15 Server Components

Compatible

Score:95/100

Fully compatible with Next.js 15, but requires manual peer dependency flags due to React 19 breaking changes in Radix UI primitives.

Technical Analysis

The integration between shadcn-ui and Next.js 15 is robust because shadcn operates as a component generator rather than a runtime dependency. This architecture bypasses many common versioning conflicts found in traditional component libraries. However, since Next.js 15 defaults to React 19, developers often encounter peer dependency warnings from underlying Radix UI primitives. These are typically false positives that can be resolved by using latest package versions or installation flags.

From a performance perspective, shadcn's reliance on Tailwind CSS and direct source code inclusion aligns perfectly with Next.js 15's optimization strategies. To maintain the benefits of React Server Components (RSC), you should keep the 'use client' directive at the lowest possible level within the shadcn component itself (e.g., in the button.tsx or dialog.tsx), allowing your page-level components to remain as server-side logic carriers.

Known Issues (2)

1React 19 Peer Dependency Conflict

Some Radix UI primitives used by shadcn still list React 18 as a maximum peer dependency, causing npm install to fail in Next.js 15.

Workaround

Use 'npx shadcn@latest add [component] --legacy-peer-deps' or update your .npmrc to automatically handle peer dependency conflicts.

2Hydration Mismatch in Dialogs/Popovers

Next.js 15's more aggressive hydration checks may trigger warnings if portals are rendered incorrectly during the initial pass.

Workaround

Ensure that components like Dialog or Tooltip are only triggered by user interaction or wrapped in a mounted check if they depend on browser-only state.

Best Use Cases

Building high-performance SaaS dashboards using Next.js 15 App Router.
Developing accessible design systems that leverage React 19's improved ref handling.
Rapid prototyping for startups requiring a customized UI without the overhead of a heavy library.
Modernizing legacy Next.js apps to use Server Components and Tailwind CSS.

Frequently Asked Questions

Share this Badge

Add this compatibility badge to your GitHub README or website.

GitHub README (Markdown)

[![Shadcn/ui + Nextjs 15 Server Components](https://devradar.dev/api/v1/badge/shadcn-ui-with-nextjs-15-server-components.svg)](https://devradar.dev/check/shadcn-ui-with-nextjs-15-server-components)

Website (HTML)

<a href="https://devradar.dev/check/shadcn-ui-with-nextjs-15-server-components"><img src="https://devradar.dev/api/v1/badge/shadcn-ui-with-nextjs-15-server-components.svg" alt="Shadcn/ui + Nextjs 15 Server Components" /></a>

Direct Badge URL

https://devradar.dev/api/v1/badge/shadcn-ui-with-nextjs-15-server-components.svg

Get Started

Architecture isn't a gamble.
It's a calculation.

Eliminate incompatible technologies and build a defensible tech stack.

Launch Architect Wizard

No assumptions. No account required. Deterministic validation.