الـ Stack
npm ولا registry؟npm للـ versioning المركزي · shadcn registry لنفسك أو لتيم صغير
Behavior و a11yBase UI (default) · React Aria (RTL و تواريخ)
StylingTailwind v4 + CSS variables · cva · tailwind-merge + clsx
Buildtsdown (ESM + CJS + d.ts + unbundle) · أو Vite library mode + vite-plugin-dts
reactpeerDependencies، مش bundle
DocsStorybook + addon-a11y + interaction tests
TestsVitest + Testing Library · Chromatic أو Playwright screenshots
نشرpnpm workspaces + Turborepo · Changesets · GitHub Actions
المكتبات
Base UIheadless بجد · render prop · shadcn بيستخدمها · لسه جديدة
React Ariaأقوى a11y و RTL و date picker · verbose و bundle أكبر
Radixناضجة · تطوير أبطأ · RTL أضعف
rc-*مش headless · rc-motion · استخدمها لـ TreeSelect أو Cascader بس
جداول و lists طويلةTanStack Table + TanStack Virtual
HybridBase UI أساس + DatePicker من React Aria · API واحد موحّد
الـ Animation
Base UIdata-starting-style · data-ending-style · keepMounted · --transform-origin
Radixdata-state=open/closed · forceMount
React Ariadata-entering · data-exiting · isEntering / isExiting
Drawer في RTL[dir=rtl] اعكس translateX
tokens--motion-duration و --motion-ease كـ CSS variables
reduced motion@media (prefers-reduced-motion: reduce) → duration 0
Motionمش جوه الـ lib · المستخدم يجيبها بـ render prop
ToastBase UI Toast headless · Sonner هتحكمك بحركتها
التقييم من ١٠٠
| المعيار | 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 |