How to add magic ui to my react project?

Can you please guide me how to use magic ui. I have done the following steps to setup but failed:

1.) npm install clsx tailwind-merge framer-motion (i have tailwind css installed already) 2.) set up this code: // src/lib/utils.js import clsx, { ClassValue } from "clsx"; import { twMerge } from "tailwind-merge";

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

3.) npm install magic-ui 4.) Then i have added a component to my app.js

 // src/App.jsx

  import React from 'react';
  import { Button, Modal } from 'magic-ui';
  import 'magic-ui/dist/magic-ui.css';  // Import the necessary CSS

  function App() {
    return (
      <div>
        <h1>Hello Vite + React!</h1>
        <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
        <Modal title="Example Modal">
          <p>This is a modal.</p>
        </Modal>
      </div>
    );
  }

  export default App;

5.) While running the command npm i magic-ui I encounter this error:

      C:\Users\lg\Desktop\Immigration Website\sunny-immigrations>npm i magic-ui                                    \lib\config
  npm WARN deprecated rimraf@2.4.5: Rimraf versions prior to v4 are no longer supported
  npm WARN deprecated glob@6.0.4: Glob versions prior to v9 are no longer supported                            lib\configu
  npm WARN deprecated formidable@1.2.6: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
  npm WARN deprecated node-uuid@1.4.8: Use uuid module instead                                                 e\\bin\\nod
  npm WARN deprecated log4js@0.6.38: 0.x is no longer supported. Please upgrade to 6.x or higher.              onfigure" "
  npm ERR! code 1
  npm ERR! path C:\Users\lg\Desktop\Immigration Website\sunny-immigrations\node_modules\odbc
  npm ERR! command failed
  npm ERR! command C:\Windows\system32\cmd.exe /d /s /c node-gyp configure build
  npm ERR! gyp info it worked if it ends with ok
  npm ERR! gyp info using node-gyp@10.0.1
  npm ERR! gyp info using node@14.21.3 | win32 | x64                                                           50_07_519Z-
  npm ERR! gyp info find Python using Python version 3.11.0 found at "C:\Users\lg\AppData\Local\Programs\Python\Python311\python.exe"
  npm ERR! gyp ERR! configure error 
  npm ERR! gyp ERR! stack TypeError: Cannot read property 'pipeline' of undefined
  npm ERR! gyp ERR! stack at Object.<anonymous> (C:\Users\lg\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\install.js:8:32)
  npm ERR! gyp ERR! stack at Module._compile (internal/modules/cjs/loader.js:1114:14)
  npm ERR! gyp ERR! stack at Object.Module._extensions..js (internal/modules/cjs/loader.js:1143:10)
  npm ERR! gyp ERR! stack at Module.load (internal/modules/cjs/loader.js:979:32)
  npm ERR! gyp ERR! stack at Function.Module._load (internal/modules/cjs/loader.js:819:12)
  npm ERR! gyp ERR! stack at Module.require (internal/modules/cjs/loader.js:1003:19)
  npm ERR! gyp ERR! stack at require (internal/modules/cjs/helpers.js:107:18)
  npm ERR! gyp ERR! stack at Object.acc.<computed> [as install] (C:\Users\lg\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\node-gyp.js:80:32)
  npm ERR! gyp ERR! stack at getNodeDir (C:\Users\lg\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:53:26)
  npm ERR! gyp ERR! stack at configure (C:\Users\lg\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\configure.js:24:10)
  npm ERR! gyp ERR! System Windows_NT 10.0.19045
  npm ERR! gyp ERR! command "C:\\Users\\lg\\Desktop\\Immigration Website\\sunny-immigrations\\node_modules\\node\\bin\\node.exe" "C:\\Users\\lg\\AppData\\Roaming\\npm\\node_modules\\npm\\node_modules\\node-gyp\\bin\\node-gyp.js" "configure" "build"
  npm ERR! gyp ERR! cwd C:\Users\lg\Desktop\Immigration Website\sunny-immigrations\node_modules\odbc
  npm ERR! gyp ERR! node -v v14.21.3
  npm ERR! gyp ERR! node-gyp -v v10.0.1
  npm ERR! gyp ERR! not ok

  npm ERR! A complete log of this run can be found in: C:\Users\lg\AppData\Local\npm-cache\_logs\2024-06-27T05_23_56_235Z-debug-0.log

It says that magic-ui is not installed on my pc.

I have python, installed visual studio c++ development kit and even tryed lower version of npm but magic-ui is not working.

kindly plz help.🙏🙏

magicuidesign / magicui

How to add magic ui to my react project? #183