In this post,how to install Next js 15 with Shadcn. check install nodejs version minimum 18 React minimum 18 above

npx create-next-app@latest 

What is your project named? … nextjswithshadch

• ✔ 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 your code inside a 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 import alias (@/* by default)? …** No** / Yes

type command:

cd nextjswithshadch

npm run dev

show command line

nextjswithshadch@0.1.0 dev

next dev --turbopack

Next.js 15.0.1 (Turbopack)

• Local: http://localhost:3000

Open the Url in browser http://localhost:3000

after in with integrate with ShadCn

install Shadcn

• go project director and open command line
• type

npx shadcn@latest init

show error but how to solve

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 ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: nextjswithshadch@0.1.0
npm ERR! Found: react@19.0.0-rc-69d4b800-20241021
npm ERR! node_modules/react
npm ERR!   react@"19.0.0-rc-69d4b800-20241021" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.x || ^17.x || ^18.x" from @radix-ui/react-icons@1.3.0
npm ERR! node_modules/@radix-ui/react-icons
npm ERR!   @radix-ui/react-icons@"*" 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! 
npm ERR! 

type command:

npm install tailwindcss-animate class-variance-authority clsx tailwind-merge

this error fix but not bew ready

go to project folder

create folder root directory name lib

and create file utils.ts

paste this code

import * as React from "react";
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

export function formatDate(input: string | number): string {
  const date = new Date(input);
  return date.toLocaleDateString("en-US", {
    month: "long",
    day: "numeric",
    year: "numeric",
  });
}

export function absoluteUrl(path: string) {
  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
}

and save

go project folder edit app/page.tsx import code

import Image from "next/image";
import { Button } from "@/components/ui/button"


export default function Home() {
  return (
    <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center
    min-h-screen 
    p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
     <Button variant="secondary">Secondary</Button>
     
    </div>
  );
}

check the final test show Secondary button done