معرفی RetroUI 2.0 - بزرگ‌تر، جسورانه‌تر، بهتر

ماه‌هاست که در تاریکی می‌سازیم. امروز چراغ را روشن می‌کنیم.

RetroUI 2.0 اینجاست، و بزرگ‌ترین به‌روزرسانی‌ای است که تا به حال منتشر کرده‌ایم. این صرفاً یک تغییر شمارهٔ نسخه نیست، بلکه یک تکامل کامل از آنچه RetroUI می‌تواند انجام دهد و چگونگی تعامل شما با آن است.

وقتی RetroUI را راه انداختیم، هدف ساده بود: دادن یک کتابخانهٔ UI به توسعه‌دهندگان که شبیه هر چیز دیگری نباشد. طراحی‌های جسورانه، زیبایی‌شناسی نئوبروتالیستی و مؤلفه‌هایی که پروژه‌های شما را برجسته می‌کنند. آن چشم‌انداز تغییر نکرده است. اما شیوهٔ تحقق‌بخشیدن به آن؟ آن به‌شدت تکامل یافته است.

بیایید در تازه‌ها غرق شویم.

🎨 پشتیبانی از Base UI - شالوده‌ای که خواستید

یکی از پرتقاضاترین امکانات از روز نخست، پشتیبانی از Base UI بوده است، و بالاخره اینجاست.

Base UI چیست؟

Base UI یک کتابخانه از مؤلفه‌های React بدون سبک و دسترس‌پذیر است که توسط تیم MUI ساخته شده. آن را جایگزین headless و مستقل از فریم‌ورک برای Material UI بدانید: کل رفتار و کل منطق دسترس‌پذیری را بدون هیچ نظر بصری تحمیلی به دست می‌آورید.

چرا این برای RetroUI مهم است

تا کنون، مؤلفه‌های RetroUI بر پریمیتیوهای Radix UI ساخته می‌شدند (که عالی‌اند، بد برداشت نکنید). اما Base UI امکانات تازه‌ای می‌گشاید:

• انعطاف فریم‌ورکی: Base UI بی‌اصطکاک در React، Next.js و دیگر فریم‌ورک‌های مدرن کار می‌کند
• tree-shaking بهتر: باندل‌های سبک‌تر به لطف بهینه‌سازی صیقل‌خورده
• دسترس‌پذیری تقویت‌شده: پریمیتیوهای دسترس‌پذیری Base UI به‌خوبی آزموده شده‌اند و بی‌درنگ با WCAG سازگارند
• معماری آماده برای آینده: ساخته‌شده برای React Server Components و اکوسیستم مدرن React

این برای شما چه معنایی دارد؟ مؤلفه‌های RetroUI اکنون سریع‌تر، دسترس‌پذیرتر و منعطف‌تر از همیشه‌اند. و همهٔ این‌ها بدون کنارگذاشتن زبان طراحی جسورانه و شاخصی که دوستش دارید.

کپی// Now powered by Base UI under the hood
import { Button } from '@/components/neobrutalism'
 
<Button variant="primary">
  Still bold. Still RetroUI. Now even better.
</Button>

🌐 یک سایت، یک چشم‌انداز - OS و Pro یکپارچه

چیزی بود که ما را می‌آزرد: نگه‌داشتن سایت‌های جدا برای RetroUI OS (رایگان) و RetroUI Pro، پراکنده حس می‌شد. انگار جامعه‌مان را تقسیم می‌کردیم به‌جای اینکه گِردش بیاوریم.

دیگر نه.

یک سایت کاملاً بازطراحی‌شده

کل سایت RetroUI را از بنیان بازساختیم و OS و Pro را در یک تجربهٔ یکپارچه ذوب کردیم. تازه‌ها اینجاست:

یک کتابخانهٔ مؤلفهٔ یکپارچه

همهٔ مؤلفه‌ها را، رایگان و pro، در یک جا مرور کنید. دیگر پرش میان سایت‌ها برای دیدن آنچه در دسترس است لازم نیست. همه‌چیز به‌روشنی نشانه‌گذاری شده، پس می‌دانید چه چیزی رایگان است و چه چیزی ممتاز.

ناوبری تمیزتر

یافتن آنچه نیاز دارید سریع‌تر و شهودی‌تر است. مؤلفه‌ها، blocks، قالب‌ها، مستندات: هر چیز جای منطقی خود را دارد.

طراحی صیقلی‌تر

به آنچه موعظه می‌کنیم عمل می‌کنیم. سایت تازه جسورانه‌تر، سریع‌تر و پرداخته‌تر است. این یک ویترین از توانایی RetroUI است، وقتی به زیبایی‌شناسی کامل متعهد شوید.

تجربهٔ موبایل بهتر

سایت قدیمی روی موبایل کار می‌کرد. سایت تازه روی موبایل می‌درخشد. طراحی واکنش‌گرا آن‌طور که باید، با تعامل‌های لمسی که بومی حس می‌شوند.

بهترین بخش؟ همه‌چیز با مؤلفه‌های RetroUI کار می‌کند. غذای خودمان را می‌خوریم: هر مؤلفه‌ای که در سایت می‌بینید چیزی است که می‌توانید در پروژه‌های خود به کار ببرید.

📚 مستنداتی که واقعاً کمک می‌کند

رک بگوییم: مستندات اغلب به بعد موکول می‌شود. این‌بار نه.

مستندات RetroUI را کاملاً بازنگری کردیم، با امکاناتی که زندگی‌تان را آسان‌تر می‌کنند:

کپی به‌صورت Markdown

روی مستندات پروژهٔ خود کار می‌کنید؟ مقاله‌ای دربارهٔ RetroUI می‌نویسید؟ حالا می‌توانید کد یک مؤلفه را به‌صورت Markdown کپی کنید، تنها با یک کلیک.

عالی برای:

• ساختن مستندات مؤلفه‌های خودتان
• نوشتن آموزش‌ها و راهنماها
• به اشتراک‌گذاشتن نمونه‌های کد در ابزارهای مبتنی بر Markdown (Notion، GitHub و غیره)

مستندات با پشتیبانی هوش مصنوعی

کمک هوش مصنوعی را مستقیماً در مستندات گنجاندیم. پرسشی دربارهٔ سفارشی‌سازی یک مؤلفه دارید؟ باید API را بفهمید؟ هوش مصنوعی کمک می‌کند پاسخ‌ها را سریع‌تر از زیرورو کردن صفحه‌های مستندات بیابید.

نمونه‌هایی از آنچه می‌توانید بپرسید:

• «چطور کاری کنم مؤلفهٔ Button رنگ‌های سفارشی به کار ببرد؟»
• «مؤلفهٔ Card چه propsهایی می‌پذیرد؟»
• «نمونه‌هایی از کاربرد Modal با فرم‌ها نشانم بده»

مثل این است که شبانه‌روز یک متخصص RetroUI در دسترس داشته باشید.

نمونه‌های کد بهبودیافته

اکنون هر مؤلفه این‌ها را دارد:

• پیش‌نمایش‌های زنده که می‌توانید با آن‌ها تعامل کنید
• گونه‌های متعدد که سناریوهای مختلف کاربرد را نشان می‌دهند
• کد آمادهٔ کپی-پیست با importهای درست
• نمونه‌های TypeScript برای ایمنی نوع بهتر
• یادداشت‌های دسترس‌پذیری که توضیح می‌دهند هر مؤلفه چگونه a11y را مدیریت می‌کند

دیگر حدس‌زدنی نیست. دیگر زیرورو کردن کد منبعی نیست. فقط نمونه‌های روشن و مفیدی که کمک می‌کنند سریع‌تر بسازید.

🧱 بیش از 100 blocks تازه - سریع‌تر از همیشه بسازید

مؤلفه‌ها عالی‌اند. اما گاهی به بخش‌های کامل نیاز دارید، نه فقط دکمه و کارت.

اینجاست که blocks وارد می‌شوند.

blocks چیستند؟

blocks بخش‌های آماده‌ای هستند که می‌توانید در پروژه‌تان بیندازید: بخش‌های hero، جدول‌های قیمت، شبکه‌های ویژگی، نظرات، CTAها و بیشتر. کاملاً واکنش‌گرا، دسترس‌پذیر و آمادهٔ سفارشی‌سازی‌اند.

در 2.0 چه تازه است؟

بیش از 100 blocks تازه در هر دسته‌ای که فکرش را بکنید افزوده‌ایم:

بخش‌های hero

• بیش از 15 گونهٔ تازهٔ hero، از مینیمال تا تمام‌عرض
• شامل پس‌زمینه‌های متحرک، چیدمان‌های صفحهٔ دونیم و heroهای ویدیویی

ویژگی‌ها و مزیت‌ها

• شبکه‌های ویژگی مبتنی بر آیکون
• ویترین‌های اسکرین‌شات
• راهنماهای گام‌به‌گام
• جدول‌های مقایسه

جدول‌های قیمت

• از چیدمان‌های ساده 2 ستونی تا قیمت‌گذاری پیچیدهٔ 4 سطحی
• کلید صورت‌حساب (ماهانه/سالانه)
• ماتریس‌های مقایسهٔ ویژگی

نظرات

• چیدمان‌های شبکه‌ای، چرخانه و طرح‌های masonry
• نظرات ویدیویی
• دیوارهای لوگو به‌عنوان گواه اجتماعی

CTAها و تبدیل‌ها

• ثبت‌نام خبرنامه
• فرم‌های فهرست انتظار
• بخش‌های دانلود اپ
• فرم‌های تماس با شخصیت

سرصفحه‌ها و ناوبری

• مگامنوها
• الگوهای ناوبری با رویکرد موبایل-اول
• سرصفحه‌های چسبان با افکت‌های اسکرول

پاصفحه‌ها

• پاصفحه‌های چندستونی
• پاصفحه‌های مینیمال تک‌ردیفی
• پاصفحه‌های با خبرنامهٔ یکپارچه

هر block با همان زیبایی‌شناسی جسورانهٔ RetroUI ساخته شده است: حاشیه‌های ضخیم، سایه‌های تیز، رنگ‌های پرشور و چیدمان‌های نامتقارن. آن‌ها برای برجسته‌شدن طراحی شده‌اند، نه برای ذوب‌شدن در زمینه.

کپی// Drop in a complete hero section in seconds
import { HeroBold } from '@/components/blocks'
 
<HeroBold
  title="Your Product Name"
  subtitle="Ship faster with bold design"
  cta="Get Started"
/>

🌙 قالب تازه: داشبورد ابزار توسعه در حالت تیره

قالب‌ها جایی‌اند که همه‌چیز به هم می‌رسد: مؤلفه‌ها، blocks و فلسفهٔ طراحی در یک اپلیکیشن کامل یکپارچه می‌شوند.

تازه‌ترین قالب خود را معرفی می‌کنیم: Dark Mode Dev Tool Dashboard.

این چیست؟

یک داشبورد تمام‌امکانات با رویکرد حالت‌تیره-اول، ساخته‌شده برای ابزارهای توسعه‌دهندگان، سکوهای SaaS و پنل‌های مدیریت. هر آنچه برای ساختن یک اپلیکیشن آمادهٔ تولید با زیبایی‌شناسی جسورانهٔ RetroUI نیاز دارید.

چه چیزی در آن هست؟

یک چیدمان داشبورد کامل

• ناوبری کناری با منوی جمع‌شدنی
• سرصفحهٔ بالایی با جست‌وجو و نمایهٔ کاربر
• طراحی واکنش‌گرا که روی موبایل، تبلت و دسکتاپ کار می‌کند

صفحه‌های آماده

• نمای کلی داشبورد با معیارها و نمودارها
• مدیریت کاربران (فهرست، جزئیات، ویرایش)
• صفحهٔ تنظیمات با نمونه‌های فرم
• صفحهٔ مستندات API
• مدیریت صورت‌حساب و اشتراک

حالت تیرهٔ درست

• نه صرفاً رنگ‌های وارونه، بلکه به‌طور هدفمند برای پس‌زمینه‌های تیره طراحی‌شده
• کنتراست بالا برای خوانایی
• رنگ‌های تأکیدی پرشور که روی پس‌زمینهٔ تیره به چشم می‌زنند

امکانات آمادهٔ تولید

• صفحه‌های احراز هویت (ورود، ثبت‌نام، فراموشی رمز)
• حالت‌های خطا و حالت‌های خالی
• اسکلت‌های بارگذاری
• اعلان‌های toast
• گفت‌وگوهای مودال و تأییدها

دوستدار توسعه‌دهنده

• ساخته‌شده با TypeScript
• ساختار مؤلفهٔ مستندسازی‌شده
• سفارشی‌سازی و گسترش آسان
• پیرو قراردادهای App Router در Next.js

این یک قالب اسباب‌بازی نیست. یک شالوده است که می‌توانید محصولات واقعی را روی آن بسازید. چه یک SaaS نو راه بیندازید، چه یک ابزار داخلی بسازید، یا یک سکوی توسعه‌دهنده خلق کنید، این قالب به شما پیش‌قدمی می‌دهد.

و بله، به هیچ قالب داشبورد دیگری در بیرون شبیه نیست. نکته دقیقاً همین است.

چرا این مهم است

RetroUI 2.0 فقط دربارهٔ افزودن امکانات نیست. دربارهٔ نیرومندتر، منعطف‌تر و مفیدتر کردن RetroUI برای پروژه‌های دنیای واقعی است.

پشتیبانی از Base UI یعنی کارایی و دسترس‌پذیری بهتر.

سایت یکپارچه یعنی کشف آسان‌تر و تجربه‌ای بهتر برای همه.

مستندات بهبودیافته یعنی زمان کمتر برای جست‌وجو و زمان بیشتر برای ساختن.

بیش از 100 blocks تازه یعنی می‌توانید صفحه‌های کامل را در چند دقیقه منتشر کنید، نه چند روز.

قالب حالت تیره یعنی یک شالودهٔ محکم برای پروژهٔ بعدی‌تان دارید.

روی‌هم‌رفته، این تازه‌ها RetroUI 2.0 را به کامل‌ترین و آماده‌ترین کتابخانهٔ UI برای تولید بدل می‌کنند، برای توسعه‌دهندگانی که از ساختن رابط‌های کسل‌کننده سر باز می‌زنند.

بعد چه؟

این یک انتشار بزرگ است، اما همین‌جا نمی‌ایستیم. آنچه در نقشهٔ راه است:

• قالب‌های بیشتر (گونه‌های حالت روشن، صفحه‌های فرود، تجارت الکترونیک)
• یکپارچگی Figma به کد برای جریان سریع‌تر از طراحی تا توسعه
• مؤلفه‌های Base UI بیشتر همزمان با گسترش کتابخانه
• یک ویترین جامعه با پروژه‌های ساخته‌شده با RetroUI
• آموزش‌های ویدیویی که الگوها و سناریوهای رایج را مرور می‌کنند

و گوش می‌دهیم. اگر مؤلفه‌ای هست که نیاز دارید، امکانی که می‌خواهید، یا مشکلی که با آن روبه‌رویید، به ما بگویید. RetroUI برای توسعه‌دهندگان، به دست توسعه‌دهندگان ساخته شده است. بازخورد شما شکل می‌دهد که بعد چه بسازیم.

RetroUI 2.0 را همین امروز امتحان کنید

آمادهٔ غوطه‌ورشدن هستید؟ اینجاست که چطور شروع کنید:

برای کاربران تازه

کپی# Install RetroUI
npx retroui-cli init
 
# Or install via npm
npm install @retroui/react

مؤلفه‌ها را مرور کنید، blocks را کاوش کنید و قالب تازه را بردارید. همه‌چیز آمادهٔ استفاده در پروژهٔ Next.js، React یا Vite شماست.

برای کاربران موجود

اگر پیش‌تر از RetroUI استفاده می‌کنید، ارتقا به 2.0 ساده است:

pnpmnpmyarnbun
pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest
کپی

changelog را برای هرگونه تغییر ناسازگار بررسی کنید (بسیار اندک‌اند، و برای همه‌شان راه‌حل مستند کرده‌ایم).

سپاس

RetroUI وجود دارد چون توسعه‌دهندگانی مانند شما از طراحی‌های معمولی خسته‌اند. می‌خواهید چیزهایی بسازید که برجسته‌اند، شخصیت دارند، متفاوت حس می‌شوند.

ما اینجاییم تا این را آسان‌تر کنیم.

نسخهٔ 2.0 ثمرهٔ ماه‌ها کار، صدها کامیت، تکرارهای بی‌شمار طراحی و بازخورد یک جامعهٔ شگفت‌انگیز است. سپاس که بخشی از این سفر هستید.

حالا بروید و چیزی جسورانه بسازید. 🚀

RetroUI 2.0 را کاوش کنید:

• مرور مؤلفه‌ها
• تماشای blocks
• برداشتن قالب
• خواندن مستندات
• پیوستن به جامعه

پرسشی دارید؟ بازخوردی؟ باگی یافتید؟ یک issue در گیت‌هاب باز کنید یا در Twitter/X با ما در تماس باشید.