![reactjs + tailwind + vite](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfrgmjHkWw-TBZ9BvNc6OBqe4lLqnAfx0-JA&s)

Hey Hive fam! 🐝  
Are you building a React app and wondering *"How the heck do I add Hive login with AIOHA?"* 😵‍💫  
Well, you’re in for a treat! Because in this post, I’ll walk you through integrating the @aioha package into a React project from scratch—with sprinkles of Tailwind, DaisyUI, and good vibes. 🌈💻

---

## 🧰 Project Setup

### 🔨 Step 1: Create Your Vite + React + TypeScript App

```bash
npm create vite@latest vite-react-aioha-ts -- --template react-ts
cd vite-react-aioha-ts
npm install
```

### 💅 Step 2: Add TailwindCSS

```bash
npm install tailwindcss @tailwindcss/vite
npm install -D postcss autoprefixer
```

Edit `vite.config.ts`:

```ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [react(), tailwindcss()],
});
```

📸 Screenshot for visual learners:  
![vite.config.ts](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGXhX1A7xKvtvGD3PKrokZZSi8sSPPicxsMHYVZS4m5WEZKexyUCXbuogzdGzXgMQgH.png)

---

## 🌸 Add DaisyUI (Because UI should never be boring!)

```bash
npm i -D daisyui@latest
```

---

## 📦 Install AIOHA

```bash
pnpm i @aioha/react-ui @aioha/aioha
```

Now we’re getting serious! 😎

---

## ⚙️ Integrate AIOHA in `App.tsx`

🧽 Clean up `App.tsx` (yes, delete the fluff).  
📸 Here's how mine looks:  
![App.tsx screenshot](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t76kWDdojbiVdAKWyC8nqfkMiiSd6Cg6fDAA85SuEhuC93BDU54JvTGdMyagDvgMYDY.png)

---

## 👤 Add Hive User Avatar Button Component

Create a file: `HiveUserAvatarButton.tsx`

### 🧑‍🎨 Use DaisyUI Avatar Component

Copy JSX from DaisyUI Docs and paste into your component.

> Shorthand tip: Type `rafce` in your file to scaffold the component ⚡

![JSX snippet for avatar](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t74bhEqP4SV8ZFHEHzZwsSN6F5x8dRir3KwxPa5mirhXp5N2TCNB1WqVveGiECiM28j.png)

---

## 🪄 Combine DaisyUI + AIOHA

In `HiveUserAvatarButton.tsx`, do the following:

1. Import AIOHA methods  
2. Add a button to open login modal  
3. Use AIOHA popup (copied from [official docs](https://aioha.dev/docs/react/ui#usage))

🎯 Final result:  
![Daisy + AIOHA integration](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGW1byw84HXcKspL42xShR6fZSy9XzhnNrS6AoG7KPdQ3BgbxbAAiWeCQRQuD5bwxLS.png)

---

## 🔗 Plug the Button into `App.tsx`

Import and use your shiny new `<HiveUserAvatarButton />` wherever needed.

---

## 🐞 Debug Like a Pro (in VS Code)

1. Click on **Run & Debug**
2. Choose **"Web App (Chrome)"**
3. Edit the launch file—set port to `5173`  
4. Run the app with:

```bash
npm run dev
```

...then hit F5 to debug inside Chrome! 🕵️‍♀️  
![VS Code Debug](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tRv7LcgMjLNvw1igLftzmbDDzkFXdpoe5tSzSy2WXNG879wNZLCfuuWYqq4H6VNrjpV.png)

---

## ✨ Polish & Final Touches

### 🌀 Fix: Avatar isn’t rounded?

Add `overflow-hidden` to fix that:
```html
<div className="avatar overflow-hidden">...</div>
```

![Fix overflow](https://files.peakd.com/file/peakd-hive/sagarkothari88/23t77FNxg4YXddUpsTntjxQGvwdBL1QPfTWkGeNN6JVvqKRZTaJr4PpnL968YvCrWCSGH.png)

---

### 🚫 Fix: CSS conflicts with AIOHA

Some popup buttons weren’t displaying properly due to boilerplate styles.  
I removed unnecessary button CSS and boom 💥—it’s fixed!

![Remove boilerplate CSS](https://files.peakd.com/file/peakd-hive/sagarkothari88/Eo44ERPFPky8s9VphdFPdtKnRwwyYioqcJAvPfXmkA5AqaESDG6FkCZ3ubYGXqajTzt.png)

---

## 🧪 Try Out Account Switching

Logged in as `@shaktimaaan` for testing. Here's the login view and switch-user popup:

![Switch User](https://files.peakd.com/file/peakd-hive/sagarkothari88/23tGRgxuiJRu83ccemnZJvxjqpY1mBWtxdh7UvjS15zWZH6RaPitEiVNZW1z1ttDVLmWh.png)

> Dear @techcoderx – consider adding avatars in switch-user list? 🙏🙂

---

## 🥳 Wrap-Up

We’ve successfully:

✅ Created a modern React + Vite + Tailwind setup  
✅ Integrated AIOHA login + popup  
✅ Styled it with DaisyUI  
✅ Fixed common issues  
✅ Debugged like a pro in VS Code

If you found this helpful, don’t forget to **upvote** 🧡  
Your support keeps me coding and caffeinated! ☕

**More power to Hive & its awesome community!** 🐝🔥

---

### 📝 Final Note

Since English isn’t my first language, I asked ChatGPT/AI to help optimize this post to make it more readable and viewer-friendly.

I hope this isn’t against any downvoting rules 🙏  
But if it is, feel free to let me know and I’ll be more cautious next time.

---

### 🚀 My Contributions to ♦️ Hive Ecosystem

| Contribution | To | Hive | Ecosystem |
|--------------|----|------|-----------|
| Hive Witness Node | Hive API Node (in progress) | 3Speak Video Encoder Node Operator (highest number of nodes) | 3Speak Mobile App Developer |
| 3Speak Podcast App Developer | 3Speak Shorts App Developer | 3Speak Support & Maintenance Team | [Distriator Developer](https://distriator.com/) |
| [CheckinWithXYZ](https://checkinwith.xyz/) | [Hive Inbox](https://hive-inbox.the-hive-mobile.app/) | [HiFind](https://hifind.the-hive-mobile.app/) | [Hive Donate App](https://donate.the-hive-mobile.app/) |
| Contributed to HiveAuth Mobile App | Ecency ↔ 3Speak Integration | Ecency ↔ InLeo Integration | Ecency ↔ Actifit Integration |
| [Hive Stats App](https://stats.the-hive-mobile.app/) | [Vote for Witness App](https://witness.the-hive-mobile.app/) | [HiveFlutterKit](https://hiveflutterkit.sagarkothari88.one/docs/intro) | [New 3Speak App](https://3speak.sagarkothari88.one/#/?tab=home) |

---



### 🙌 Support Back

❤️ **Appreciate my work? Consider supporting @threespeak & @sagarkothari88!** ❤️

| Vote | For | Witness |
|------|-----|---------|
| [![](https://images.hive.blog/u/sagarkothari88/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | [sagarkothari88](https://witness.the-hive-mobile.app/#/witnesses/@sagarkothari88) | @sagarkothari88 |
| [![](https://images.hive.blog/u/threespeak/avatar)](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | [threespeak](https://witness.the-hive-mobile.app/#/witnesses/@threespeak) | @threespeak |

---