React ও Next.js প্রজেক্টে ব্যবহারযোগ্য ৪৩টি সেরা Tailwind-based UI লাইব্রেরির তালিকা — টায়ার র্যাংকিং, কনফ্লিক্ট গাইড, অ্যাডভান্সড ফিল্টার এবং মাল্টিপল থিম সাপোর্ট সহ।
- 🔍 Real-time Search with Debounce — টাইপ করার সময় smooth এবং performant সার্চ
- 🎨 Multiple Themes — Deep Dark, Indigo, Purple & Teal থিমে সুইচ করার সুবিধা
- 📋 Smart Copy Install Button — শুধুমাত্র
npm installকমান্ড কপি করা যায় (Copy-paste disabled) - 🪄 Staggered Card Animation — কার্ডগুলো একটু একটু করে সুন্দরভাবে আসে
- 💀 Skeleton Loading — ডেটা লোড হওয়ার সময় প্রিমিয়াম skeleton UI
- 📱 Library Detail Modal — কার্ডে ক্লিক করলে বিস্তারিত তথ্যসহ সুন্দর মডাল খোলে
- 🏷️ Advanced Filtering — Tier, Free, New, Animation ফিল্টার
⚠️ Conflict Guide — কোন লাইব্রেরি একসাথে ব্যবহার করা যাবে না তার গাইড- 🏆 Expert Recommendations — প্রজেক্টের জন্য আদর্শ কম্বিনেশন
- 📤 Export Feature — ফিল্টার করা লাইব্রেরি JSON বা CSV ফরম্যাটে এক্সপোর্ট করুন
- HTML5 & CSS3 (Custom Properties, Multiple Themes, Glassmorphism)
- Vanilla JavaScript (ES6+, Debounce, LocalStorage, Export Logic)
- Google Fonts — Sora & JetBrains Mono
- JSON Based Data — সহজে নতুন লাইব্রেরি যোগ করা যায়
tailwind-ui-libraries/
├── index.html # মূল UI স্ট্রাকচার
├── style.css # থিম সিস্টেম, অ্যানিমেশন ও স্কেলিটন স্টাইল
├── script.js # সার্চ, ফিল্টার, থিম, এক্সপোর্ট এবং কপি লজিক
├── data.json # ৪৩টি লাইব্রেরির ডেটা
└── README.md
কোনো build tool দরকার নেই — সরাসরি ব্রাউজারে খুলুন।
# Clone করুন
git clone https://github.com/Shawon-Mahmud07/Tailwind-UI-Libraries
# ফোল্ডারে যান
cd tailwind-ui-libraries
# index.html ব্রাউজারে খুলুন
open index.htmlঅথবা VS Code এ Live Server extension দিয়ে রান করুন।
নতুন লাইব্রেরি যোগ করতে চান? Pull request পাঠান!
script.jsএlibsarray-তে নতুন entry যোগ করুন- সব field পূরণ করুন (name, tier, free, react, next, link, install, desc)
- PR পাঠান
MIT License — ফ্রি এবং ওপেন সোর্স। যেকোনো প্রজেক্টে ব্যবহার করতে পারবেন।