- بیش از ۲۱۵ کامپوننت متحرک و تعاملی
- پشتیبانی از جاوا اسکریپت، تایپ‌اسکریپت، CSS و Tailwind
- سازگار با ابزارهای هوش مصنوعی و CLI
فرصت مطالعه ندارید؟ چکیده این مطلب را همین‌جا گوش دهید:
طراحی رابط‌های کاربری چشم‌نواز و به یادماندنی در وب، نیازمند ابزارها و انیمیشن‌های روانی است که چشم کاربر را خیره کنند. کتابخانه React Bits بزرگترین مجموعه‌ی متن‌باز از کامپوننت‌های متحرک، تعاملی و قابل سفارشی‌سازی برای ری‌اکت (React) و نکست‌جی‌اس (Next.js) است که به طور کامل برای توسعه‌دهندگان و حتی ایجنت‌های هوش مصنوعی توسعه یافته است. این مجموعه با بیش از ۲۱۵ کامپوننت و پس‌زمینه رایگان، دست شما را برای پیاده‌سازی مدرن‌ترین افکت‌ها باز می‌گذارد.
| نام ابزار | React Bits |
|---|---|
| نوع محصول | کتابخانه کامپوننت متن‌باز (Open Source) |
| زبان برنامه‌نویسی | JavaScript / TypeScript |
| تعداد کامپوننت‌ها | ۲۱۵+ کامپوننت و پس‌زمینه رایگان |
| لایسنس | MIT + Commons Clause |
| وضعیت دسترسی ایران | کاملاً آزاد (بدون محدودیت) |
ساختار داخلی و دسته‌بندی کامپوننت‌ها
تمام اجزای موجود در این کتابخانه دارای پیش‌نمایش زنده با کنترل‌های مختلف هستند و در چهار طعم مختلف ارائه می‌شوند: جاوا اسکریپت یا تایپ‌اسکریپت، همراه با استایل CSS خالص یا فریمورک محبوب Tailwind. این انعطاف‌پذیری باعث می‌شود بدون دغدغه‌ی نوع معماری پروژه خود بتوانید از آن‌ها استفاده کنید.
دسته‌بندی‌های اصلی این مجموعه شامل موارد زیر است:
- انیمیشن‌های متن (Text Animations): شامل ۳۳ کامپوننت جذاب از جمله متن‌های تفکیک‌شده (Split Text)، افکت ماشین‌تحریر، کلمات چرخان و ظاهرشونده به هنگام اسکرول.
- انیمیشن‌ها (Animations): شامل ۳۸ افکت نشانگر ماوس، تعاملات هاور، حاشیه‌های متحرک و افکت‌های روی تصاویر.
- کامپوننت‌ها (Components): شامل ۴۸ مورد کارت، منوی ناوبری، اسلایدرها (Carousels) و گالری‌های تصویر.
- عناصر خرد (Micro): شامل ۳۴ جزء کوچک رابط کاربری مثل دکمه‌ها، کلیدهای دوحالته (Toggles) و نشانگرها.
- پس‌زمینه‌ها (Backgrounds): شامل ۶۳ گرادینت، ذرات متحرک (Particles)، شبکه‌ها و افکت‌های شیدر برای کل بخش‌های صفحه.
روش نصب و اضافه کردن کامپوننت‌ها
برای اضافه کردن هر کدام از کامپوننت‌ها به پروژه‌ی خود، سریع‌ترین راه استفاده از ابزار خط فرمان shadcn است. پسوند نام کامپوننت مشخص‌کننده‌ی نوع زبان (JS یا TS) و نوع استایل‌دهی (CSS یا TW) خواهد بود. برای مثال، دستور زیر برای اضافه کردن کامپوننت SplitText است:
npx shadcn@latest add @react-bits/SplitText-TS-TWپس از اجرای این دستور، کامپوننت مورد نظر همراه با تمام وابستگی‌ها و تنظیمات ساختاری به ساختار پروژه شما افزوده می‌شود و آماده‌ی شخصی‌سازی است. در صورتی که از ابزار jsrepo استفاده می‌کنید، می‌توانید دستور زیر را به کار ببرید:
npx jsrepo@latest add https://reactbits.dev/r/SplitText-TS-TWهمچنین اگر تمایلی به استفاده از CLI ندارید، کافی است تب کد هر کامپوننت را در سایت رسمی باز کنید، طعم دلخواهتان را انتخاب کرده و فایل‌ها را به صورت دستی در پروژه کپی کنید.
استفاده از React Bits با ایجنت‌های هوش مصنوعی
یکی از قابلیت‌های جالب این پروژه، سازگاری کامل آن با سرور MCP مرتبط با ابزار shadcn است. این یعنی دستیارهای هوش مصنوعی مانند Claude Code، Cursor یا VS Code می‌توانند به صورت خودکار کامپوننت‌های مورد نیاز شما را پیدا کرده و به پروژه اضافه کنند. برای راه‌اندازی این قابلیت، کافی است رجیستری زیر را به فایل components.json پروژه خود اضافه کنید:
{
"registries": {
"@react-bits": "https://reactbits.dev/r/{name}.json"
}
}سپس کلاینت هوش مصنوعی خود را با دستوری مشابه npx shadcn@latest mcp init --client claude مقداردهی اولیه کرده و مستقیماً از ایجنت بخواهید کامپوننت‌های مدنظرتان را فراخوانی کند.
ابزارهای خلاقانه درون مرورگر
علاوه بر کتابخانه کدهای ری‌اکت، این پروژه شامل پنج ابزار رایگان وب‌محور برای تولید دارایی‌های صوتی و گرافیکی است:
- Background Studio: مرور تمام پس‌زمینه‌های متحرک، شخصی‌سازی زنده و خروجی گرفتن به صورت کد، تصویر باکیفیت یا ویدیوهای لوپ شونده.
- Center Stage: تبدیل اسکرین‌شات‌ها به نماهای سه‌بعدی و حرفه‌ای از گوشی، لپ‌تاپ و مرورگر برای ویدیوهای معرفی محصول.
- Shape Magic: طراحی لوگو و نشان‌های سه‌بعدی با متریال‌هایی مثل کروم و شیشه و خروجی ری‌اکت یا گرافیک برداری.
- Texture Lab: اعمال بیش از ۱۶۰ استایل و افکت انباشته‌پذیری روی تصاویر و ویدیوها (مثل افکت‌های گلیچ و ASCII).
- Sound Lab: تست و تنظیم ۲۰۰ صدای رابط کاربری و ویدیو با قابلیت اعمال افکت‌های صوتی و نصب سریع.
پرسش‌های متداول
آیا استفاده از کامپوننت‌های React Bits رایگان است؟
بله، بیش از ۲۱۵ کامپوننت و پس‌زمینه موجود در کتابخانه اصلی کاملاً رایگان بوده و برای استفاده‌های شخصی و تجاری آزاد هستند.
آیا حتماً باید از Tailwind CSS استفاده کنم؟
خیر. هر کامپوننت در چهار نسخه‌ی مجزا (JS با CSS، جی‌اس با Tailwind، تایپ‌اسکریپت با CSS و تایپ‌اسکریپت با Tailwind) ارائه شده است تا با هر استک فنی سازگار باشد.
آیا این کتابخانه فریمورک‌های دیگری مثل Vue را هم پشتیبانی می‌کند؟
نسخه‌ی اصلی مختص React و Next.js است، اما نسخه‌های رسمی مستقل دیگری با نام‌های Vue Bits و Svelte Bits نیز توسط جامعه توسعه‌دهندگان ارائه شده‌اند.
جمع‌بندی
کتابخانه React Bits یک منبع فوق‌العاده ارزشمند و متن‌باز برای توسعه‌دهندگان وب است که می‌خواهند بدون درگیر شدن با پیاده‌سازی پیچیده‌ی انیمیشن‌ها از صفر، جلوه‌های بصری خیره‌کننده‌ای به وب‌سایت‌های ری‌اکت و نکست‌جی‌اس خود ببخشند. پشتیبانی از ابزارهای اتوماسیون، سازگاری با ایجنت‌های هوش مصنوعی و تنوع بالای کامپوننت‌ها، این ابزار را به گزینه‌ای تبدیل کرده که ذخیره کردن آن در جعبه‌ابزار هر برنامه‌نویسی ضروری است.
