Base UI ولا React Aria ولا rc-* ولا Radix؟

الأربعة سليمين، بس كل واحد لغرض

rc-select وعيلة rc-*

المميزات: فيها components تقيلة مش موجودة في الـ headless libraries: virtual list جوه الـ select، و TreeSelect، و Cascader، و table معقد.

العيوب:

• مش headless بالمعنى الحقيقي. معمولة على مقاس antd، فبتيجي بـ classNames وبنية DOM ثابتة. انت بتعمل override للـ CSS بدل ما تبني الشكل من الأول.
• الـ animation ماشية بـ rc-motion اللي بيعتمد على classes بأسماء معينة (motionName). تقدر تغيّرها، بس هتفضل جوه نظامها.
• الـ accessibility أضعف من Base UI و React Aria.
• الـ API والـ docs متوجهين لفريق antd.

Base UI

• المميزات: headless بجد، render prop للـ composition، سهلة مع Tailwind، ووراها community وأمثلة كتير لأن shadcn بيستخدمها.
• العيوب: جديدة نسبيًا، وبعض الـ components المعقدة (زي date picker) لسه مش كاملة زي React Aria.
• مناسبة لـ: design system عام بـ Tailwind وعايز توازن بين السرعة والجودة.

React Aria

• المميزات:
  • أقوى accessibility حاليًا، متختبرة على screen readers وأجهزة كتير.
  • دعم RTL و i18n ممتاز: الكيبورد والـ positioning بيتعكسوا صح. مهم جدًا لـ UI عربي.
  • أقوى date picker و calendar، وبيدعموا تقاويم مختلفة زي الهجري.
  • مستويين: hooks زي useButton و useComboBox، أو react-aria-components جاهزة headless.
• العيوب: الكود verbose، الـ learning curve أعلى، والـ bundle أكبر.
• مناسبة لـ: products جدية لازم تكون accessible وبأكتر من لغة، وفيها forms وتواريخ كتير.

Radix

ناضجة ومستخدمة في production كتير. بس نفس الصناع ركزوا على Base UI، والـ RTL فيها أضعف. لو هتبدأ من الصفر النهارده، مفيش سبب قوي تختارها بدل Base UI.

خيارات تانية تعرفها

الـ Hybrid: تخلط عادي

مثلًا: Base UI أساس الـ lib، و DatePicker و Calendar من React Aria، و rc-* بس لو احتجت component تقيل مش موجود في غيرها.

// المستخدم مش عارف ولا يهمه إن ده React Aria تحتexport function DatePicker({ value, onChange, label }: DatePickerProps) {  return (    <AriaDatePicker value={value} onChange={onChange} className="ui-datepicker">      {/* ... الشكل بتاعك ... */}    </AriaDatePicker>  );}

خلّصت الفصل لما

• تعرف ليه rc-* مش headless بجد
• تعرف امتى React Aria تكسب Base UI
• تعرف ليه Radix مش أول اختيار لمشروع جديد
• تعرف تعمل hybrid بـ API واحد موحّد