UI Libraries مكتبات مكوّنات الواجهة
آخر تحديث: 2026-11-03
UI Libraries مكتبات مكوّنات الواجهة
تأتي مكتبات مكوّنات React بنكهتين: مكتبات كاملة مثل Ant Design و MUI و shadcn/ui تعمل جاهزةً وتُبقي السلوك البصري تحت تحكّم المكتبة، بينما تقدّم المكتبات بلا واجهة (headless) مثل Radix و Headless UI المنطق وإمكانية الوصول فقط وتترك البصريات لك. والاختيار بينها في جوهره مقايضة بين سرعة الإنجاز وحريّة التخصيص.
| المجموعة | المنظومة والتقدّم |
|---|---|
| النوع | مكتبة |
| منذ الإصدار | Ant Design v5 و MUI v6 و Radix UI لا تزال تصدر تحديثات (2025) |
ℹ️ ملاحظة يحوّل المحرّر JSX إلى JavaScript ويعرض الواجهة الحقيقية داخل بيئة معزولة؛ تُركَّب المكوّنات تلقائياً دون استدعاء render يدوي.
📝 الصيغة
# Full component library: install it and use it right away
npm install antd
import { Button } from 'antd'
<Button type="primary" onClick={save}>Save</Button>
# Headless library: install it and write the visuals yourself
npm install @radix-ui/react-dialog
import * as Dialog from '@radix-ui/react-dialog'
<Dialog.Root> {/* logic: state, focus and accessibility are handled by the library */}
<Dialog.Trigger>Open</Dialog.Trigger>
<Dialog.Portal>{/* the visuals are fully custom */}</Dialog.Portal>
</Dialog.Root>⚙️ المعاملات
| props such as type / variant | كيف تُخصَّص المكتبات الكاملة: تنتقي props مظهرًا وسلوكًا من المتغيّرات التي توفّرها المكتبة. |
|---|---|
| render / asChild | كيف تُخصَّص المكتبات بلا واجهة: تسلّم المكتبة حالة التفاعل والأحداث لدالة render أو العنصر الابن لديك، وتكون البصريات بكاملها متروكة لك. |
القيمة المرجعة：لا قيمة مرتجعة — راجع المثال لاستخدام مكتبة الطرف الثالث.
▶ مثال
المثال يعمل مباشرة: يُعرض تلقائياً عند التوسيع وتظهر التعديلات فوراً.
الناتج：
محاكاة: اللوحة العلوية تعرض أزرارًا بأسلوب AntD (زر أساسي أزرق وزر متقطّع)، ومظهرها يُشتق من المتغيّرات المضبوطة مسبقًا عبر props؛ وأسفلها زر بأسلوب بلا واجهة (حبة بنفسجية) يُعرَّف مظهره بالكامل عبر دالة render ويعتّم لونه أثناء الضغط (حالة pressed مقدَّمة من «المكتبة»). وكل نقرة تُكتب إلى سجل العمليات بالأسفل. ويُحاكى الأسلوبان معًا عبر React الأصلي.💡 النقاط الأساسية
💡 نصيحة تنسخ shadcn/ui شفرة مصدر المكوّنات المبنية على Tailwind و Radix إلى مشروعك، ما يضعها بين المكتبات الكاملة والبلا واجهة وأصبحت الخيار الأشهر في السنوات الأخيرة.
⚠️ تحذير المكتبات الكاملة كبيرة الحجم، لذا استوردها عند الطلب (tree-shaking) أو عبر استيراد المسارات الفرعية لتجنّب إرسال كل مكوّن إلى الشاشة الأولى.
ℹ️ ملاحظة تُشحَن المكتبات البلا واجهة بلا أي أنماط، لكن التنقّل بلوحة المفاتيح وإدارة التركيز و ARIA وبقية تفاصيل إمكانية الوصول مُعالَجة مسبقًا، ما يناسب نظام تصميم داخليًا مخصّصًا بعمق.
🏷️ المزيد من المنظومة
💡 حالات ذات صلة
المزيد من الحالات قريباً.
📚 دروس ذات صلة
❓ الأسئلة الشائعة
س كيف أختار بين Ant Design و MUI؟
ج لأنظمة الإدارة والخلفية، أو منظومة ناطقة بالصينية، اختر AntD؛ وللمشاريع الدولية التي تريد Material Design ونظام تلوين قوي، اختر MUI. وكلاهما يدعم الاستيراد عند الطلب وتخصيص السمة بعمق.
س متى تكون المكتبة البلا واجهة الخيار الصحيح؟
ج حين يكون التصميم مخصّصًا بعمق وتريد تحكّمًا كاملًا بالبصريات، اختر Radix أو Headless UI. فهي تحل الأجزاء الصعبة — تركيز الحوار، والتشغيل بلوحة المفاتيح، و ARIA — وأنت تكتب الأنماط فقط.
س هل shadcn/ui مكتبة مكوّنات؟
ج بالمعنى الدقيق لا: فهي تنسخ شفرة مصدر مكوّنات مبنية على Tailwind و Radix مباشرةً إلى مشروعك، فالكود ملكك ويمكن تعديله بحرّية، فتجمع بين التجربة الجاهزة وقابلية التخصيص.
