الواجهات والتصميم

Radix UI Primitives

ابني مكونات UI قابلة للوصول وبدون تنسيق مع Radix UI اللي بتتعامل مع التفاعلات المعقدة وأنماط WAI-ARIA.

Claude Code Cursor Copilot Windsurf

نظرة عامة

يوفر Radix UI أساسيات واجهة مستخدم غير منسقة وقابلة للوصول لـ React تتعامل مع أنماط التفاعل المعقدة مثل النوافذ المنبثقة والقوائم المنسدلة والتلميحات والتبويبات. يمكن لعملاء الذكاء الاصطناعي تركيب أساسيات Radix مع أنماطك الخاصة لبناء مكتبات مكونات مخصصة بالكامل وقابلة للوصول دون إعادة اختراع إدارة التركيز والتنقل بلوحة المفاتيح.

كل أساس في Radix يتعامل مع الأجزاء الصعبة في تطوير واجهات المستخدم: حصر التركيز في الحوارات، والكتابة المباشرة في قوائم الاختيار، وسمات ARIA الصحيحة، والتنقل بلوحة المفاتيح، وإعلانات قارئ الشاشة، وعرض البوابات. يمكن لعميل الذكاء الاصطناعي تنفيذ هذه المكونات بثقة تامة بأن إمكانية الوصول مُعالَجة بشكل صحيح.

Radix هو الأساس المستخدم في shadcn/ui، وفهم الأساسيات مباشرة يمنحك مرونة أكبر. يمكن لعملاء الذكاء الاصطناعي المساعدة في تركيب الأساسيات في أنماط UI معقدة مثل لوحات الأوامر وصناديق الاختيار المتعدد والقوائم السياقية وقوائم التنقل المتداخلة مع إمكانية وصول صحيحة.

لمن هذه الأداة؟

مطورين بيبنوا أنظمة تصميم مخصصة لازم تكون قابلة للوصول بالكامل
فرق بتنفذ أنماط تفاعل معقدة زي comboboxes والقوائم
مهندسين محتاجين أساسيات بدون تنسيق تتوافق مع لغات تصميم موجودة
مطورين بيبنوا مكتبات مكونات للاستخدام على مستوى المؤسسة

التثبيت

إعداد Claude Code

npm install @radix-ui/react-dialog @radix-ui/react-dropdown-menu @radix-ui/react-tooltip

الإعدادات

// Dialog example
import * as Dialog from "@radix-ui/react-dialog";

<Dialog.Root>
  <Dialog.Trigger>Open</Dialog.Trigger>
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content className="fixed top-1/2 left-1/2 ...">
      <Dialog.Title>Edit Profile</Dialog.Title>
      <Dialog.Description>Make changes here.</Dialog.Description>
      <Dialog.Close>Close</Dialog.Close>
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor