🚀 Integrate AIOHA with Your React App from Scratch (Vite + Tailwind + DaisyUI)

reactjs + tailwind + vite

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

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

💅 Step 2: Add TailwindCSS

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

Edit vite.config.ts:

import tailwindcss from '@tailwindcss/vite';

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

📸 Screenshot for visual learners:
vite.config.ts

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

npm i -D daisyui@latest

📦 Install AIOHA

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

👤 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

🪄 Combine DaisyUI + AIOHA

In HiveUserAvatarButton.tsx, do the following:

Import AIOHA methods
Add a button to open login modal
Use AIOHA popup (copied from official docs)

🎯 Final result:
Daisy + AIOHA integration

🔗 Plug the Button into `App.tsx`

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

🐞 Debug Like a Pro (in VS Code)

Click on Run & Debug
Choose "Web App (Chrome)"
Edit the launch file—set port to 5173
Run the app with:

npm run dev

...then hit F5 to debug inside Chrome! 🕵️‍♀️
VS Code Debug

✨ Polish & Final Touches

🌀 Fix: Avatar isn’t rounded?

Add overflow-hidden to fix that:

<div className="avatar overflow-hidden">...</div>

Fix overflow

🚫 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

🧪 Try Out Account Switching

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

Switch User

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
CheckinWithXYZ	Hive Inbox	HiFind	Hive Donate App
Contributed to HiveAuth Mobile App	Ecency ↔ 3Speak Integration	Ecency ↔ InLeo Integration	Ecency ↔ Actifit Integration
Hive Stats App	Vote for Witness App	HiveFlutterKit	New 3Speak App

🙌 Support Back

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

Vote	For	Witness
	sagarkothari88	@sagarkothari88
	threespeak	@threespeak

Sort:

Trending

[-]

indiaunited (69) 2 months ago

This post has been manually curated by @steemflow from Indiaunited community. Join us on our Discord Server.

Do you know that you can earn a passive income by delegating to @indiaunited. We share more than 100 % of the curation rewards with the delegators in the form of IUC tokens. HP delegators and IUC token holders also get upto 20% additional vote weight.

Here are some handy links for delegations: 100HP, 250HP, 500HP, 1000HP.

_{100% of the rewards from this comment goes to the curator for their manual curation efforts. Please encourage the curator @steemflow by upvoting this comment and support the community by voting the posts made by @indiaunited.}

$0.00

sagarkothari88 (75) 2 months ago

Thank you so much @indiaunited & @steemflow for curation.
Have a good day.

_{via Inbox}

kgakakillerg (71) 2 months ago

Can you please stop downvoting me with your alt account @letsusbuyhive tell Dan and Marcus I said hello 👋🏾😁

weone (60) 2 months ago

Thanks for the nice and simple tutorial 😊

You are welcome @weone

Have a good day

_{via Inbox}

latinowinner (55) 2 months ago

it looks like a professional advice

@latinowinner Thank you.

I'll keep up my best

_{via Inbox}

dobro2020 (67) 2 months ago

I see that your main skills are the backend but it's good see post about thirds integration in hive. I have to develop a tool with the new APIs Docs when i have free time

I think you got it wrong @dobro2020

My main skills are on front-end. I usually write apps in swift. Sometimes I write flutter+dart code.
But react is a new journey for me.

For API documentation, I recommend you to use Swagger.

All the best.

Thank you for stopping by.

Have a good day.

_{via Inbox}

When You start with react it's a totally Journey because is like css, You can in so much ways and get the same result

aftabirshad (58) 2 months ago

Great!