Cannot resolve import { Button } from "@/components/ui/button"; in Next.js project"

enter image description herei just got error in import Button why im getting , i dont understand infact GPT is not able to solve this, i added all the nessassary libraries!

"use client";
import { Button } from "@/components/ui/button";
import { UserButton, useUser } from "@clerk/nextjs";
import { useMutation } from "convex/react";
import { api } from "@/convex/_generated/api"; 
import { useEffect } from "react";

import Image from "next/image";

export default function Home() {

  const {user} = useUser();
  const createUser = useMutation(api.user.createUser);


  useEffect(() => {
    if (user) {
      user&&CheckUser();
    }
  }, [user]);
  const CheckUser = async()=>{
    const result = await createUser({
      email:user?.primaryEmailAddress?.emailAddress,
      imageUrl:user?.imageUrl,
      userName:user?.fullName
    });
    console.log(result);
  }
  return (
    <div>
      <p>Shree Ganesh ai namah</p>

      
        <UserButton/>
        Hello
        <Button>Click</Button>
      
    </div>
  );
}

help me to get out of this

The error Cannot resolve import { Button } from "@/components/ui/button" in your Next.js project typically occurs when the module you are trying to import does not exist or the import path is incorrect.

Here are the steps to resolve this issue:

1. Verify the Component Path

   • Check if the button component exists in the specified path: src/components/ui/button.tsx or src/components/ui/button.jsx.

   • Ensure the file name and directory structure are correct and match the import path.

   • If the file does not exist, create it or adjust the import path accordingly.

2. Update the Import Path:

   • If the file is located elsewhere, update the import to the correct path:

import { Button } from "../components/ui/button";

Or, if @ is configured as an alias for src in your Next.js tsconfig.json or jsconfig.json, confirm the alias is properly set:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["src/components/*"]
    }
  }
}

If not set, add it and restart your development server.

4. Verify Button Component

   • Ensure that the Button component is exported from the file:

5. Dependencies Check

   • If the Button component comes from a library (e.g., @shadcn/ui or similar), ensure the library is installed:

npm install @shadcn/ui