منابع فرانت اند! 🚀

🚀 توسعه خود را با این منابع شارژ کنید! 🚀

👋 سلام به همه! 👋

برای به اشتراک گذاشتن این مجموعه از منابعی که در طول زمان جمع آوری کرده ام، که در بسیاری از پروژه هایی که روی آنها کار کرده ام نجات بخش بوده اند، هیجان زده هستم. این مجموعه ابزارها و کتابخانه های مختلفی را از ایجاد رابط کاربری گرفته تا بهینه سازی عملکرد و فراتر از آن را گرد هم می آورد. امیدوارم شما هم بتوانید از برخی از این منابع شگفت انگیز نهایت استفاده را ببرید. بیایید درست شیرجه بزنیم!

در صورت تمایل با هر منبع دیگری که استفاده می کنید یا برایتان جالب است نظر بدهید تا بتوانم آنها را به پست اضافه کنم!

UI:

• Material Tailwind: یک کیت رابط کاربری قوی که ترکیبی از طراحی متریال و Tailwind CSS است

• Aceternity UI: اجزای رابط کاربری شیک و مدرن برای پروژه بعدی شما

• NextUI: رابط های زیبا را بدون زحمت با NextUI ایجاد کنید

• ChakraUI: یک کتابخانه اجزای ساده، مدولار و در دسترس

• نمودارهای نمای معاملاتی: بازی تجسم داده خود را با نمودارهای سبک وزن TradingView تقویت کنید

• AutoAnimate: به راحتی انیمیشن های خیره کننده با AutoAnimate ایجاد کنید

• React-magic-motion: کمی جادو به اجزای React خود اضافه کنید

• Keep React: اجزای React خود را تازه و شیک نگه دارید

• Daisy UI: با Daisy UI رابط های لذت بخشی ایجاد کنید

• ShadCn: رابط کاربری خود را با اجزای شیک و زیبا ارتقا دهید

• مسیر کلیپ: با استفاده از Clippy با اشکال خلاقیت به خرج دهید

• Radix: با Radix رابط‌های کاربری قدرتمند و قابل ترکیب بسازید

• Layout Generator: طرح بندی های انعطاف پذیر را با سهولت طراحی کنید

• ابزارهای کاربردی: یک جعبه ابزار مفید برای شیب ها، مکان نماها و موارد دیگر

• تولید کننده تصویر: فوراً طرح های خود را با تصاویر با کیفیت بالا تقویت کنید

• دکمه‌ها: رابط‌های کاربری خود را با سبک دکمه‌گذاری کنید

• PrimeReact: اجزای اصلی برای برنامه های React شما

• همه چیز در یک صفحه: مجموعه ای از منابع را کاوش کنید

گرادیان ها:

• Firecms: گرادیان های پویا برای پروژه های شما

• Shadergradient: گرادیان های سایه زن خیره کننده بدون زحمت ایجاد کنید

SVG ها:

• اشکال: اشکال SVG زیبا برای طرح های شما

• SVG ها: مجموعه وسیعی از SVG ها را کشف کنید

• تصاویر SVG: با تصاویر Undraw به پروژه های خود زندگی بیافزایید

دیگران:

• لغزنده – Swiper: به طور یکپارچه روی محتوا بکشید

• اعلان‌ها با نان تست – Sonner: اعلان‌های نان تست آسان شده است

• Elementos 3D – Atropos: عناصر سه بعدی همهجانبه را به پروژه های خود اضافه کنید

• متحرک سازی خودکار JS Nativo: به راحتی عناصر را با جاوا اسکریپت وانیلی متحرک کنید

• Vaul (Slider desde abajo): لغزنده های خود را با Vaul بالا ببرید

• بهینه‌ساز عملکرد ویدیوها: عملکرد ویدیو را با Lite Web Component YouTube بهینه کنید

• تقویم: روند برنامه ریزی خود را ساده کنید

• انتخابگر کنتراست: از قابلیت دسترسی با بررسی کنتراست رنگ‌ها اطمینان حاصل کنید

• بهینه ساز تصویر: برای عملکرد بهتر، تصاویر خود را به هم بزنید

باد دم:

• انیمیشن‌ها: با Tailwind CSS Animated به رابط‌های کاربری خود جذابیت اضافه کنید

• Intersection Observer: Tailwind CSS Intersect برای مشاهده تقاطع ها

• پس‌زمینه: پس‌زمینه‌های خود را به راحتی تقویت کنید

جاوا اسکریپت:

• Masonry Grid: طرح های شبکه پویا را به راحتی ایجاد کنید

• MiniMasonry: یک جایگزین سبک وزن برای چیدمان های سنگ تراشی

• گالری PhotoSwipe: تصاویر خود را به زیبایی با PhotoSwipe به نمایش بگذارید

• Gallery LightGallery: LightGallery برای گالری های تصاویر خیره کننده

• Tempo: عملیات مبتنی بر زمان را با Tempo ساده کنید

• Tippy (نکات ابزار): تجربه کاربر را با راهنمایی های ابزار قابل تنظیم بهبود بخشید

• Intersection Observer: راهنمای Intersection Observer برای پیمایش کارآمد

• اسکرول بی نهایت: پیمایش بی نهایت را بدون زحمت پیاده سازی کنید

• فقط: یک کتابخانه برای ابزارهای رایج جاوا اسکریپت

• GLTF ها به JSX: فایل های GLTF را به اجزای JSX تبدیل کنید

واکنش نشان دهید:

• شمارنده: اعداد خود را به صورت پویا بشمارید

• طرح بندی سنگ تراشی: طرح بندی های سنگ تراشی پاسخگو را در React بسازید

• کشیدن و رها کردن: به راحتی قابلیت کشیدن و رها کردن را اجرا کنید

• FilePond: آپلود فایل ها را با FilePond ساده کنید

• Faker: داده های جعلی واقع بینانه را با Faker ایجاد کنید

• تصادفی: پروژه های خود را با کلمات تصادفی ادویه کنید

• نمودارها: داده ها را به زیبایی با Chart.js تجسم کنید

• UseSound: جلوه های صوتی را در برنامه های React خود بگنجانید

• ReCharts: کتابخانه نمودار ساخته شده بر روی اجزای React

• UI شناور (Tooltip): رابط کاربری شناور برای نکات ابزار تعاملی

• Tippy (Tooltips): Tippy.js برای برنامه های React

• تقویم: یکی دیگر از منابع تقویم برای تمام نیازهای برنامه ریزی شما

• کنسول CMDK: کنسولی برای برنامه های React شما