How to add magic ui to my react project?

[SidakVats]

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 [email protected]: Rimraf versions prior to v4 are no longer supported
  npm WARN deprecated [email protected]: Glob versions prior to v9 are no longer supported                            lib\configu
  npm WARN deprecated [email protected]: Please upgrade to latest, formidable@v2 or formidable@v3! Check these notes: https://bit.ly/2ZEqIau
  npm WARN deprecated [email protected]: Use uuid module instead                                                 e\\bin\\nod
  npm WARN deprecated [email protected]: 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 [email protected]
  npm ERR! gyp info using [email protected] | 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.🙏🙏

[unnamed-lab]

While installing the packages npm install clsx tailwind-merge framer-motion is a correct step to go, installing magicui as a package is not possible (at time of writing). When you install the specified package, create and paste the lib/utils.ts file content, you are to create a file path in your folder for the preferred ui you wish to use, copy and paste the source code into the ui file on your project and you can use it how you want.

[dillionverma]

This should help for installing with react :)

https://magicui.design/docs/installation/manual