✨ Migrate components from NextUI to HeroUI and update dependencies

Author: PentSec

.npmrc

@@ -1 +1 @@
-public-hoist-pattern[]=*@nextui-org/*
+public-hoist-pattern[]=*@heroui/*

package.json

@@ -10,8 +10,8 @@
         "preview": "vite preview"
     },
     "dependencies": {
-        "@nextui-org/react": "^2.6.11",
-        "@nextui-org/use-theme": "^2.1.1",
+        "@heroui/react": "2.6.12",
+        "@heroui/use-theme": "2.1.1",
         "@tailwindcss/typography": "^0.5.16",
         "autoprefixer": "^10.4.20",
         "dompurify": "^3.2.3",
@@ -44,4 +44,4 @@
         "typescript-eslint": "^8.20.0",
         "vite": "^6.0.7"
     }
-}
+}

pnpm-lock.yaml

@@ -1,10 +1,10 @@
-import { NextUIProvider } from '@nextui-org/react'
+import { HeroUIProvider } from "@heroui/react"
 import { ReactNode } from 'react'
 
 export function Provider({ children }: { children: ReactNode }) {
     return (
-        <NextUIProvider className="light-bg-gradiant dark:dark-bg-gradiant overflow-auto overflow-x-hidden">
+        <HeroUIProvider className="light-bg-gradiant dark:dark-bg-gradiant overflow-auto overflow-x-hidden">
             {children}
-        </NextUIProvider>
+        </HeroUIProvider>
     )
 }

src/Provider.tsx

@@ -1,4 +1,4 @@
-import { Card, CardHeader, CardBody, CardFooter, Link, Skeleton } from '@nextui-org/react'
+import { Card, CardHeader, CardBody, CardFooter, Link, Skeleton } from "@heroui/react"
 import { FaEnvelope, FaMapMarkerAlt, FaGithub } from 'react-icons/fa'
 import { BsBuildings, BsTwitterX } from 'react-icons/bs'
 import { GitHubUserContextProps } from '@/types'

src/components/ContactCard/ContactCard.tsx

@@ -1,4 +1,4 @@
-import { Card, CardBody, CardHeader, Chip, Skeleton, Tooltip } from '@nextui-org/react'
+import { Card, CardBody, CardHeader, Chip, Skeleton, Tooltip } from "@heroui/react"
 import languageColors from '@/data/colors.json'
 import { GitHubUserContextProps } from '@/types/index'
 import langIcons from '@/utils/LangIcons'

src/components/Languages/Languages.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react'
 import parse from 'html-react-parser'
 import DOMPurify from 'dompurify'
-import { Modal, ModalHeader, ModalBody, ModalFooter, Button, ModalContent } from '@nextui-org/react'
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button, ModalContent } from "@heroui/react"
 import { marked } from 'marked'
 import 'github-markdown-css/github-markdown.css'
 

src/components/ModalSkills/ModalSkills.tsx

@@ -6,7 +6,7 @@ import {
     Avatar,
     Tooltip,
     Skeleton
-} from '@nextui-org/react'
+} from "@heroui/react"
 import { useState } from 'react'
 import { ModalSkills } from '@/components'
 import { UserRepo } from '@/types'

src/components/ProfileCard/ProfileCard.tsx

@@ -7,7 +7,7 @@ import {
     Link,
     Skeleton,
     Tooltip
-} from '@nextui-org/react'
+} from "@heroui/react"
 import { useEffect, useState, useRef, useCallback, JSX } from 'react'
 import languageColors from '@/data/colors.json'
 import { FaRegStar } from 'react-icons/fa'

src/components/ReposCard/ReposCard.tsx

@@ -1,6 +1,6 @@
-import { VisuallyHidden, useSwitch, SwitchProps } from '@nextui-org/react'
+import { VisuallyHidden, useSwitch, SwitchProps } from "@heroui/react"
 import { MoonIcon, SunIcon } from '@/assets/Icons'
-import { useTheme } from '@nextui-org/use-theme'
+import { useTheme } from "@heroui/use-theme"
 import { useEffect } from 'react'
 
 const ThemeSwitch = (props: SwitchProps) => {