🎯

Base UI

مكتبة مكونات headless من MUI (Headless UI Components from MUI)

★ ★ ★ ★ ★ (3/5)

👁️ 4 مشاهدة

📅 02 Jul 2026

⚛️ React

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

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

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

★ ★ ★ ★ ★

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

التصنيف 🎯 UI-Libraries

المشاهدات 4

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

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

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

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

📖 الوصف

Base UI هي مكتبة مكونات headless من فريق Material UI. توفر logic والسلوك بدون styles، مما يسمح ببناء مكونات مخصصة بالكامل. مصممة لتكون foundation لـ MUI components. Base UI توفر primitives مثل Button, Dialog, Menu، وأكثر. كلها accessible وunstyled، وتترك لك حرية التصميم الكامل.

🎯 يستخدم في

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

•

Custom component libraries

•

Build your own design system

•

Applications need full styling control

•

MUI ecosystem projects

•

Accessible components without styles

✨ المميزات

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

✓

Headless (unstyled) components

✓

From MUI team

✓

Accessible مدمج

✓

Keyboard navigation

✓

TypeScript support

✓

Composable

✓

Works مع أي CSS

✓

Foundation لـ MUI

✓

Lightweight

⚠️ العيوب

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

لا تنسيق مسبق

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

Newer project

Less adoption من Radix

Documentation محدودة

🔄 البدائل

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

Radix UI

Headless UI

React Aria

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

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

Example Code

import { Button } from '@base-ui-components/react/button';
import { Dialog } from '@base-ui-components/react/dialog';

// Unstyled Button (you add the styles)
function MyButton() {
  return (
    <Button className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
      اضغط هنا
    </Button>
  );
}

// Dialog
function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger className="px-4 py-2 bg-blue-500 text-white rounded">
        افتح
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Backdrop className="fixed inset-0 bg-black/50" />
        <Dialog.Popup className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg p-6">
          <Dialog.Title className="text-xl font-bold">عنوان</Dialog.Title>
          <Dialog.Description className="mt-2 text-gray-600">
            محتوى
          </Dialog.Description>
          <Dialog.Close className="mt-4 px-4 py-2 bg-gray-200 rounded">
            إغلاق
          </Dialog.Close>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

// Menu
import { Menu } from '@base-ui-components/react/menu';

function MyMenu() {
  return (
    <Menu.Root>
      <Menu.Trigger className="px-4 py-2 bg-gray-100 rounded">
        المزيد
      </Menu.Trigger>
      <Menu.Portal>
        <Menu.Positioner>
          <Menu.Popup className="bg-white rounded shadow-lg">
            <Menu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
              الملف الشخصي
            </Menu.Item>
            <Menu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
              الإعدادات
            </Menu.Item>
            <Menu.Separator className="border-t border-gray-200 my-1" />
            <Menu.Item className="px-4 py-2 hover:bg-gray-100 cursor-pointer">
              تسجيل الخروج
            </Menu.Item>
          </Menu.Popup>
        </Menu.Positioner>
      </Menu.Portal>
    </Menu.Root>
  );
}