🎯 ⭐ مميز

Radix UI

مكتبة مكونات headless (Headless UI Component Library)

★ ★ ★ ★ ★ (4/5)

👁️ 3 مشاهدة

📅 02 Jul 2026

⚛️ React 💚 Vue.js 🧡 Svelte

مستوى الخبرة المطلوب:

⚡ متوسط 🚀 محترف 🏢 مؤسسي

🔗 زيارة الموقع الرسمي

★ ★ ★ ★ ★

تقييم المستخدمين

التصنيف 🎯 UI-Libraries

المشاهدات 3

تاريخ الإضافة 02/07/2026

آخر تحديث 02/07/2026

📋 محتويات الصفحة

📖 الوصف 🎯 يستخدم في ✨ المميزات ⚠️ العيوب 🔄 البدائل 💻 مثال

📖 الوصف

Radix UI هي مكتبة مكونات "headless" – توفر logic والسلوك للمكونات بدون styles. تسمح لك ببناء واجهات مخصصة بالكامل مع accessibility و keyboard navigation مدمج. من فريق WorkOS. Radix UI يوفر primitives لـ Dialog, Dropdown, Menu, Tabs, Accordion، وأكثر. كلها accessible و unstyled، وتترك لك حرية التصمي...

🎯 يستخدم في

مجالات استخدام هذه الأداة

•

Custom design systems

•

Applications تحتاج accessibility

•

Build your own component library

•

Projects تحتاج headless components

•

shadcn/ui مبني على Radix

✨ المميزات

أبرز مميزات هذه الأداة

✓

Headless (unstyled)

✓

Accessible مدمج (WAI-ARIA)

✓

Keyboard navigation مدمج

✓

TypeScript support

✓

Uncontrolled & controlled modes

✓

Composable primitives

✓

Works مع أي CSS solution

✓

Used by shadcn/ui

✓

Vercel

⚠️ العيوب

نقاط يجب مراعاتها

يحتاج styling من تلقاء نفسك

لا مكونات جاهزة كاملة

Learning curve للمبتدئين

Less adoption من مكتبات كاملة

Documentation قد تكون معقدة

🔄 البدائل

أدوات بديلة يمكنك استخدامها

Headless UI

React Aria

Ariakit

💻 مثال على الاستخدام

كيفية استخدام هذه الأداة

Example Code

import * as Dialog from '@radix-ui/react-dialog';
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { Cross2Icon } from '@radix-ui/react-icons';

// Custom Dialog with full styling
function CustomDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger asChild>
        <button className="btn">افتح الحوار</button>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="dialog-overlay" />
        <Dialog.Content className="dialog-content">
          <Dialog.Title>عنوان الحوار</Dialog.Title>
          <Dialog.Description>
            محتوى الحوار هنا
          </Dialog.Description>
          <Dialog.Close asChild>
            <button className="icon-button" aria-label="إغلاق">
              <Cross2Icon />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

// Dropdown Menu
function UserMenu() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger asChild>
        <button className="btn">المزيد</button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Portal>
        <DropdownMenu.Content className="dropdown-content">
          <DropdownMenu.Item className="dropdown-item">
            الملف الشخصي
          </DropdownMenu.Item>
          <DropdownMenu.Item className="dropdown-item">
            الإعدادات
          </DropdownMenu.Item>
          <DropdownMenu.Separator className="dropdown-separator" />
          <DropdownMenu.Item className="dropdown-item">
            تسجيل الخروج
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
}