الانتقال إلى المحتوى

RetroUI 2.0 وصلت: أكبر وأجرأ وأفضل من أي وقت مضى

بعد شهور من العمل، RetroUI 2.0 هنا. دعم Base UI، وموقع موحّد، وتوثيق محسّن، وأكثر من 100 بلوك جديد، وقالب جديد كليًّا. هذا أكبر تحديث لنا حتى اليوم.

ظللنا نبني في الظلام شهورًا. اليوم نُشعل الأنوار.


RetroUI 2.0 هنا، وهو أكبر تحديث أطلقناه على الإطلاق. هذه ليست مجرد قفزة إصدار، بل تطور كامل لما تستطيع RetroUI فعله ولطريقة تفاعلك معها.


حين أطلقنا RetroUI، كان الهدف بسيطًا: أن نمنح المطورين مكتبة واجهات لا تبدو مثل كل شيء آخر. تصاميم جريئة، وجماليات نيوبروتالية، ومكونات تجعل مشاريعك تبرز. هذا الحلم لم يتغير. أما كيف نحقّقه؟ فقد تطوّر تطورًا هائلًا.


لنغص فيما هو جديد.


🎨 دعم Base UI - الأساس الذي طالما طلبته

من أكثر الميزات طلبًا منذ اليوم الأول كان دعم Base UI، وها هو أخيرًا هنا.


ما هو Base UI؟

Base UI مكتبة من مكونات React غير المنسّقة والمتاحة، بناها فريق MUI. اعتبرها البديل عديم الرأس والمستقل عن أطر العمل لـ Material UI — تحصل على كل السلوك ومنطق الإتاحة دون أي آراء تنسيقية.


لماذا يهم هذا في RetroUI

حتى الآن، كانت مكونات RetroUI مبنية على أساسيات Radix UI (وهي ممتازة، لا تفهمنا خطأ). لكن Base UI يفتح إمكانات جديدة:

  • مرونة أطر العمل: يعمل Base UI بسلاسة عبر React وNext.js وأطر عمل حديثة أخرى
  • هزّ شجري أفضل: أحجام حزم أصغر مع تحسين مُطوّر
  • إتاحة مُعزَّزة: أساسيات الإتاحة في Base UI مجرّبة في الميدان ومتوافقة مع WCAG جاهزةً من الصندوق
  • بنية محصّنة للمستقبل: مبنية لمكونات React الخادمة ولمنظومة 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 في تجربة واحدة متماسكة. إليك ما هو جديد:


مكتبة مكونات موحّدة

تصفّح كل المكونات — المجانية والاحترافية — في مكان واحد. لا مزيد من القفز بين المواقع لرؤية المتاح. كل شيء مُعلَّم بوضوح، لتعرف ما هو مجاني وما هو مدفوع.


تنقّل أنظف

إيجاد ما تحتاجه أسرع وأكثر بداهة. المكونات والبلوكات والقوالب والتوثيق — لكل شيء موطن منطقي.


تصميم أكثر صقلًا

نمارس ما ندعو إليه. الموقع الجديد أجرأ وأسرع وأكثر رهافة. إنه عرض لما تستطيع RetroUI فعله حين تلتزم بالجمالية.


تجربة أفضل على الجوال

الموقع القديم كان يعمل على الجوال. الجديد يتألق على الجوال. تصميم متجاوب أُنجز بشكل صحيح، بتفاعلات لمس تبدو أصيلة.


أفضل جزء؟ كل ذلك مدعوم بمكونات RetroUI. نحن نأكل من طبخنا، ما يعني أن كل مكون تراه على الموقع هو شيء يمكنك استخدامه في مشاريعك.



📚 توثيق يساعد فعلًا

لنكن صادقين: التوثيق غالبًا فكرة لاحقة. ليس هذه المرة.


جدّدنا توثيق RetroUI بالكامل بميزات تسهّل حياتك:


نسخ بصيغة Markdown

تعمل على توثيق مشروعك الخاص؟ تكتب تدوينة عن RetroUI؟ الآن يمكنك نسخ كود المكون بصيغة Markdown بنقرة واحدة.


مثالي لـ:

  • إنشاء توثيق مكوناتك الخاصة
  • كتابة الدروس والأدلة
  • مشاركة أمثلة الكود في الأدوات القائمة على Markdown (Notion، GitHub، إلخ)

توثيق مدعوم بالذكاء الاصطناعي

دمجنا مساعدة الذكاء الاصطناعي مباشرةً في التوثيق. لديك سؤال عن كيفية تخصيص مكون؟ تحتاج إلى فهم الـ API؟ يمكن للذكاء الاصطناعي أن يساعدك في إيجاد الإجابات أسرع من التنقيب في صفحات التوثيق.


أمثلة على ما يمكنك سؤاله:

  • «كيف أجعل مكون Button يستخدم ألوانًا مخصصة؟»
  • «ما الخصائص التي يقبلها مكون Card؟»
  • «أرِني أمثلة على استخدام Modal مع النماذج»

كأن لديك خبير RetroUI في الاستعداد، على مدار الساعة.


أمثلة كود مُحسَّنة

كل مكون الآن يملك:

  • معاينات حية يمكنك التفاعل معها
  • أنماط متعددة تعرض حالات استخدام مختلفة
  • كود جاهز للنسخ واللصق باستيرادات صحيحة
  • أمثلة TypeScript لأمان أنواع أفضل
  • ملاحظات إتاحة تشرح كيف يعالج كل مكون الإتاحة

لا مزيد من التخمين. لا مزيد من التنقيب في الكود المصدري. مجرد أمثلة واضحة ومفيدة تجعلك تبني أسرع.



🧱 أكثر من 100 بلوك واجهة جديد - ابنِ أسرع من أي وقت مضى

المكونات رائعة. لكنك أحيانًا تحتاج إلى أقسام كاملة، لا مجرد أزرار وبطاقات.


هنا يأتي دور البلوكات.


ما هي البلوكات؟

البلوكات أقسام جاهزة يمكنك إسقاطها في مشروعك: أقسام أبطال، وجداول تسعير، وشبكات ميزات، وشهادات، وأزرار حث، والمزيد. متجاوبة بالكامل ومتاحة وجاهزة للتخصيص.


ما الجديد في 2.0؟

أضفنا أكثر من 100 بلوك جديد عبر كل فئة يمكنك تخيّلها:


أقسام الأبطال

  • أكثر من 15 نمط بطل جديد من المينيمالي إلى ممتد الحواف
  • تشمل خلفيات متحركة، وتخطيطات شاشة منقسمة، وأبطالًا بالفيديو

الميزات والفوائد

  • شبكات ميزات قائمة على الأيقونات
  • عروض لقطات الشاشة
  • أدلة خطوة بخطوة
  • جداول مقارنة

جداول التسعير

  • من تخطيطات بسيطة بعمودين إلى تسعير معقّد بأربع طبقات
  • تبديل الفوترة (شهري/سنوي)
  • مصفوفات مقارنة الميزات

الشهادات

  • تخطيطات شبكية، ودوّارات، وتصاميم بنائية
  • شهادات بالفيديو
  • جدران شعارات للإثبات الاجتماعي

أزرار الحث والتحويلات

  • تسجيلات النشرة البريدية
  • نماذج قوائم الانتظار
  • أقسام تنزيل التطبيق
  • نماذج تواصل بشخصية

الترويسات والتنقّل

  • قوائم ضخمة
  • أنماط تنقّل تبدأ من الجوال
  • ترويسات ثابتة بتأثيرات تمرير

التذييلات

  • تذييلات متعددة الأعمدة
  • تذييلات مينيمالية بصف واحد
  • تذييلات مدمجة بنشرة بريدية

كل بلوك مبني بالجمالية النيوبروتالية الجريئة نفسها — حدود سميكة، وظلال قاسية، وألوان نابضة، وتخطيطات غير متماثلة. مصمّمة لتبرز لا لتندمج.


// 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"
/>


🌙 قالب جديد: لوحة تحكم أداة مطورين بالوضع الداكن

القوالب هي حيث يجتمع كل شيء — المكونات والبلوكات وفلسفة التصميم موحّدة في تطبيق كامل.


نقدّم أحدث قوالبنا: لوحة تحكم أداة المطورين بالوضع الداكن.


ما هي؟

لوحة تحكم متكاملة الميزات تعطي الأولوية للوضع الداكن، مبنية لأدوات المطورين ومنصات البرمجيات كخدمة ولوحات الإدارة. إنها كل ما تحتاجه لبناء تطبيق جاهز للإنتاج بجمالية RetroUI الجريئة.


ما المُضمَّن؟

تخطيط لوحة تحكم كامل

  • تنقّل جانبي بقائمة قابلة للطي
  • ترويسة علوية ببحث وملف مستخدم
  • تصميم متجاوب يعمل على الجوال واللوحي وسطح المكتب

صفحات جاهزة

  • نظرة عامة على لوحة التحكم بمقاييس ومخططات
  • إدارة المستخدمين (قائمة، تفاصيل، تحرير)
  • صفحة إعدادات بأمثلة نماذج
  • صفحة توثيق API
  • إدارة الفوترة والاشتراكات

وضع داكن أُنجز بشكل صحيح

  • ليست مجرد ألوان معكوسة — بل مصمّمة عن قصد للخلفيات الداكنة
  • تباين عالٍ لقابلية القراءة
  • ألوان تمييز نابضة تبرز على الخلفيات الداكنة

ميزات جاهزة للإنتاج

  • شاشات مصادقة (تسجيل دخول، تسجيل، نسيان كلمة المرور)
  • حالات الخطأ والحالات الفارغة
  • هياكل تحميل
  • إشعارات منبثقة
  • حوارات منبثقة وتأكيدات

صديق للمطورين

  • مبني بـ TypeScript
  • بنية مكونات موثّقة
  • سهل التخصيص والتوسيع
  • يتبع أعراف Next.js App Router

هذا ليس قالبًا للّعب. إنه أساس يمكنك البناء عليه لمنتجات حقيقية. سواء كنت تطلق برمجية كخدمة جديدة أو تبني أداة داخلية أو تنشئ منصة مطورين، يمنحك هذا القالب انطلاقة.


ونعم، لا يشبه أي قالب لوحة تحكم آخر هناك. هذا هو المقصد.



لماذا يهم هذا

RetroUI 2.0 لا يتعلق فقط بإضافة ميزات. بل بجعل RetroUI أقوى وأكثر مرونة وأكثر فائدة لمشاريع العالم الحقيقي.


دعم Base UI يعني أداءً وإتاحةً أفضل.

الموقع الموحّد يعني اكتشافًا أسهل وتجربةً أفضل للجميع.

التوثيق المحسّن يعني وقتًا أقل في البحث ووقتًا أكثر في البناء.

أكثر من 100 بلوك جديد يعني أنك تستطيع شحن صفحات كاملة في دقائق لا أيام.

قالب الوضع الداكن يعني أن لديك أساسًا متينًا لمشروعك القادم.


معًا، تجعل هذه التحديثات RetroUI 2.0 مكتبة الواجهات الأكثر اكتمالًا وجاهزيةً للإنتاج للمطورين الذين يرفضون بناء واجهات مملة.



ما التالي؟

هذا إصدار كبير، لكننا لن نتوقف هنا. إليك ما على خارطة الطريق:


  • مزيد من القوالب (أنماط الوضع الفاتح، صفحات هبوط، تجارة إلكترونية)
  • تكامل Figma to Code لسير عمل أسرع من التصميم إلى التطوير
  • مكونات Base UI إضافية مع توسيعنا للمكتبة
  • معرض المجتمع يبرز مشاريع بُنيت بـ RetroUI
  • دروس فيديو تشرح الأنماط وحالات الاستخدام الشائعة

ونحن نستمع أيضًا. إذا كان هناك مكون تحتاجه، أو ميزة تريدها، أو مشكلة تواجهها، فأخبرنا. RetroUI مبنية للمطورين، على يد مطورين. ملاحظاتك تشكّل ما نبنيه لاحقًا.



جرّب RetroUI 2.0 اليوم

مستعد للغوص؟ إليك كيف تبدأ:


للمستخدمين الجدد

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

تصفّح المكونات، واستكشف البلوكات، واحصل على القالب الجديد. كل شيء جاهز للاستخدام في مشروع Next.js أو React أو Vite.


للمستخدمين الحاليين

إذا كنت تستخدم RetroUI بالفعل، فالترقية إلى 2.0 مباشرة:

pnpm add @retroui/react@latest
npm install @retroui/react@latest
yarn add @retroui/react@latest
bun add @retroui/react@latest

راجع سجل التغييرات لأي تغييرات كاسرة (هي قليلة جدًّا، وقد وثّقنا حلولًا بديلة لها جميعًا).



شكرًا لك

RetroUI موجودة لأن مطورين مثلك سئموا التصاميم العامة. تريد أن تبني أشياء تبرز، لها شخصية، تبدو مختلفة.


نحن هنا لنجعل ذلك أسهل.


الإصدار 2.0 ثمرة شهور من العمل، ومئات الـ commits، وعدد لا يُحصى من التكرارات التصميمية، وملاحظات من مجتمع رائع. شكرًا لكونك جزءًا من هذه الرحلة.


الآن اذهب وابنِ شيئًا جريئًا. 🚀




استكشف RetroUI 2.0:


أسئلة؟ ملاحظات؟ وجدت خللًا؟ افتح مشكلة على GitHub أو تواصل على Twitter/X.


→ العودة إلى المدوّنة