refactor: migrate from nextui to heroui

Author: doinel1a

.npmrc

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

README.md

@@ -17,7 +17,7 @@
 # Next.js 15 TypeScript Web3 EVM — Template
 
 This development starter template is the ultimate solution to help you getting started on your project in no time, without the hassle of setting up and configuring your development environment from scratch each time you start working.
-This repository is ideal for web3 and dapp (decentralized application) developers who want to build modern, fast and reliable web3 applications with the latest cutting edge technologies such as **Next.js 15**, **React.js 19**, **TypeScript**, **Shadcn/ui**, **Next UI**, **TailwindCSS**, **RainbowKit**, **Viem**, **Wagmi** and much more!
+This repository is ideal for web3 and dapp (decentralized application) developers who want to build modern, fast and reliable web3 applications with the latest cutting edge technologies such as **Next.js 15**, **React.js 19**, **TypeScript**, **Shadcn/ui**, **HeroUI**, **TailwindCSS**, **RainbowKit**, **Viem**, **Wagmi** and much more!
 
 ---
 
@@ -73,7 +73,7 @@ This repository comes 🔋 packed with:
 - **Next.js 15**;
 - **React.js 19**;
 - **Shadcn/ui**;
-- **Next UI**;
+- **HeroUI**;
 - **TailwindCSS**;
 - **SASS** & **SCSS**;
 - **RainbowKit**;

_config.ts

@@ -2,9 +2,9 @@ const config = {
   metadata: {
     title: 'Next.js 15 TypeScript Web3 EVM — Template',
     description:
-      'Boilerplate template designed to quickly bootstrap a Next.js Decentralized App, dApp, Web3 App, Web App, SPA or website with Next.js 15, React.js 19, TypeScript, Shadcn/ui, Next UI, TailwindCSS, RainbowKit, View, Wagmi and much more in just 30 seconds.',
+      'Boilerplate template designed to quickly bootstrap a Next.js Decentralized App, dApp, Web3 App, Web App, SPA or website with Next.js 15, React.js 19, TypeScript, Shadcn/ui, HeroUI, TailwindCSS, RainbowKit, View, Wagmi and much more in just 30 seconds.',
     keywords:
-      'dapp-template, dapp-boilerplate, web3-template, web3-boilerplate, next.js 15, next.js-15-template, next.js-15-boilerplate, react.js 19, react.js-19-template, react.js-19-boilerplate, typescript, shadcn, shadcn/ui, next-ui, tailwindcss, eslint, prettier, husky, commitlint, lint-staged'
+      'dapp-template, dapp-boilerplate, web3-template, web3-boilerplate, next.js 15, next.js-15-template, next.js-15-boilerplate, react.js 19, react.js-19-template, react.js-19-boilerplate, typescript, shadcn, shadcn/ui, hero-ui, tailwindcss, eslint, prettier, husky, commitlint, lint-staged'
   },
   server: {
     host: 'localhost',

next.config.ts

@@ -8,7 +8,8 @@
  */
 import './src/env.js';
 
-/** @type {import('next').NextConfig} */
+import type { NextConfig } from 'next';
+
 const nextConfig = {
   reactStrictMode: true,
   eslint: {
@@ -18,6 +19,6 @@ const nextConfig = {
     config.externals.push('pino-pretty', 'lokijs', 'encoding');
     return config;
   }
-};
+} satisfies NextConfig;
 
 export default nextConfig;

package.json

@@ -24,10 +24,10 @@
     "test:ui": "playwright test --ui"
   },
   "dependencies": {
-    "@nextui-org/button": "^2.2.9",
-    "@nextui-org/skeleton": "^2.2.5",
-    "@nextui-org/system": "^2.4.6",
-    "@nextui-org/theme": "^2.4.5",
+    "@heroui/button": "^2.2.9",
+    "@heroui/skeleton": "^2.2.5",
+    "@heroui/system": "^2.4.6",
+    "@heroui/theme": "^2.4.5",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-dropdown-menu": "^2.1.5",
     "@radix-ui/react-slot": "^1.1.1",

pnpm-lock.yaml

@@ -2,7 +2,7 @@
   "lang": "en-EN",
   "name": "Next.js 15 TypeScript Web3 EVM — Template",
   "short_name": "Next.js 15 TypeScript Web3 EVM — Template",
-  "description": "Boilerplate template designed to quickly bootstrap a Next.js Decentralized App, dApp, Web3 App, Web App, SPA or website with Next.js 15, React.js 19, TypeScript, Shadcn/ui, Next UI, TailwindCSS, RainbowKit, View, Wagmi and much more in just 30 seconds.",
+  "description": "Boilerplate template designed to quickly bootstrap a Next.js Decentralized App, dApp, Web3 App, Web App, SPA or website with Next.js 15, React.js 19, TypeScript, Shadcn/ui, HeroUI, TailwindCSS, RainbowKit, View, Wagmi and much more in just 30 seconds.",
   "start_url": "/",
   "display": "standalone",
   "orientation": "portrait",

public/app.webmanifest

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 
 import { Card, CardContent, CardHeader } from './ui/card';
 

src/components/counter.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { Skeleton } from '@nextui-org/skeleton';
+import { Skeleton } from '@heroui/skeleton';
 import dynamic from 'next/dynamic';
 
 const ThemeToggle = dynamic(() => import('./ui/theme-toggle'), {

src/components/navbar.tsx

@@ -0,0 +1,13 @@
+'use client';
+
+import React from 'react';
+
+import type { PropsWithChildren } from 'react';
+
+import { HeroUIProvider } from '@heroui/system';
+
+type THeroUiProvider = PropsWithChildren;
+
+export default function HeroUiProvider({ children }: THeroUiProvider) {
+  return <HeroUIProvider>{children}</HeroUIProvider>;
+}

src/components/providers/hero-ui.tsx

@@ -2,18 +2,18 @@ import React from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import NextUiProvider from './next-ui';
+import HeroUiProvider from './hero-ui';
 import ThemeProvider from './theme';
 import Web3Provider from './web3';
 
 type TRootProvider = PropsWithChildren;
 
 export default function RootProvider({ children }: TRootProvider) {
   return (
-    <NextUiProvider>
+    <HeroUiProvider>
       <ThemeProvider>
         <Web3Provider>{children}</Web3Provider>
       </ThemeProvider>
-    </NextUiProvider>
+    </HeroUiProvider>
   );
 }

src/components/providers/next-ui.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { Chain } from 'viem';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 
 type TChainsList = {
   title: string;

src/components/providers/root.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import { Laptop, MoonStar, Sun } from 'lucide-react';
 import { useTheme } from 'next-themes';
 

src/components/switch-chain/chains-list.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import type { PropsWithChildren } from 'react';
 
-import { Skeleton } from '@nextui-org/skeleton';
+import { Skeleton } from '@heroui/skeleton';
 
 import { cn } from '@/lib/utils';
 

src/components/ui/theme-toggle.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef, useState } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import dynamic from 'next/dynamic';
 import { useAccount } from 'wagmi';
 

src/components/wallet/dropdown/commons/dynamic-fallback.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 
 import type { ComponentProps } from 'react';
 
-import { Button } from '@nextui-org/button';
+import { Button } from '@heroui/button';
 import { useConnectModal } from '@rainbow-me/rainbowkit';
 import { useAccount } from 'wagmi';
 

src/components/wallet/dropdown/index.tsx

@@ -3,10 +3,10 @@
 
 import type { Config } from 'tailwindcss';
 
-import { nextui } from '@nextui-org/theme';
+import { heroui } from '@heroui/theme';
 
 // based on shadcn's styles
-const nextUIStyleOverride = {
+const heroUIStyleOverride = {
   layout: {
     disabledOpacity: '0.5', // shadcn: 0.9
     radius: {
@@ -27,7 +27,7 @@ const config = {
   darkMode: ['class'],
   content: [
     './src/**/*.{ts,tsx}',
-    './node_modules/@nextui-org/theme/dist/components/**/*.{js,ts,jsx,tsx}'
+    './node_modules/@heroui/theme/dist/components/**/*.{js,ts,jsx,tsx}'
   ],
   theme: {
     container: {
@@ -94,7 +94,7 @@ const config = {
       }
     }
   },
-  plugins: [nextui(nextUIStyleOverride), require('tailwindcss-animate')]
+  plugins: [heroui(heroUIStyleOverride), require('tailwindcss-animate')]
 } satisfies Config;
 
 export default config;