الأربعة ينفعوا… بس المجهود مختلف
تقدر تطبّق الـ design system والـ animation بتاعتك على الأربعة. الفرق إن rc-* مش headless بجد: الـ animation ماشية بـ rc-motion اللي بيعتمد على classes بأسماء معينة (motionName)، وشكل الـ DOM ثابت، فانت بتعمل override بدل ما تبني من الأول.
جدول التقييم (من ١٠٠)
| المعيار | Base UI | React Aria | Radix | rc-* |
|---|---|---|---|---|
| حرية الـ styling والـ design system | 95 | 95 | 90 | 55 |
| التحكم في الـ animation | 92 | 88 | 88 | 55 |
| الـ Accessibility | 88 | 98 | 88 | 60 |
| الـ RTL والـ i18n | 82 | 97 | 78 | 75 |
| تغطية الـ components | 82 | 90 | 75 | 92 |
| الـ DX وسهولة الاستخدام | 90 | 72 | 88 | 70 |
| الـ ecosystem ومستقبل الصيانة | 90 | 88 | 70 | 70 |
| الإجمالي | 88 | 87 | 80 | 60 |
تعليق على كل واحدة
أحسن توازن. API نضيف، و animation معمولة كويس (data-starting-style و --transform-origin)، ووراها فريق نشط و shadcn. ضعفها: لسه جديدة، وفيه components ناقصة أو أبسط من React Aria.
أقوى واحدة تقنيًا في الـ a11y والـ RTL والتواريخ والـ forms المعقدة. بتخسر في الـ DX لأنها verbose والـ learning curve عالي.
ناضجة ومجرّبة في production. بس التطوير أبطأ لأن الصناع ركزوا على Base UI، والـ RTL أضعف. لمشروع جديد، مفيش سبب قوي تختارها بدل Base UI.
قوتها الوحيدة: components تقيلة جاهزة (TreeSelect، Cascader، virtual select). كأساس لـ design system خاص هتتعب، وهتفضل شبه antd.