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

Headless UI Components

ابني مكونات UI قابلة للوصول بالكامل مع Headless UI، المصممة للتكامل بسلاسة مع Tailwind CSS.

Claude Code Cursor Copilot Windsurf

نظرة عامة

Headless UI هي مجموعة من مكونات واجهة المستخدم غير المنسقة بالكامل والقابلة للوصول لـ React و Vue، مبنية بواسطة فريق Tailwind CSS. يمكن لعملاء الذكاء الاصطناعي تنفيذ القوائم وصناديق القائمة وصناديق الاختيار والحوارات ولوحات الكشف والتبويبات والانتقالات مع إمكانية الوصول والتنقل بلوحة المفاتيح المدمجة.

توفر المكتبة السلوك وإمكانية الوصول بينما تضيف أنت الأنماط. يمكن لعميل الذكاء الاصطناعي دمج مكونات Headless UI مع فئات Tailwind CSS لإنشاء تصميمات دقيقة بالبكسل وقابلة للتنقل بلوحة المفاتيح ومتوافقة مع قارئات الشاشة. أنماط render-prop و slot تمنحك تحكمًا كاملاً في الترميز.

Headless UI أخف وأكثر تركيزًا من Radix UI، حيث توفر مكونات أقل ولكن مصقولة للغاية. يمكن لعملاء الذكاء الاصطناعي المساعدة في تنفيذ أنماط معقدة مثل القوائم القابلة للبحث ولوحات الكشف متعددة الخطوات والانتقالات المتحركة باستخدام مكون Transition المدمج.

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

مستخدمي Tailwind CSS اللي محتاجين مكونات تفاعلية قابلة للوصول
فرق بتبني مجموعات UI مخصصة مع إمكانية وصول متسقة
مطورو Vue اللي محتاجين أساسيات قابلة للوصول متوافقة مع أنماط Tailwind
مطورين بينفذوا قوائم منسدلة ونوافذ حوار بسرعة

التثبيت

إعداد Claude Code

npm install @headlessui/react
# For Vue: npm install @headlessui/vue

الإعدادات

// Listbox example
import { Listbox } from "@headlessui/react";

<Listbox value={selected} onChange={setSelected}>
  <Listbox.Button>{selected.name}</Listbox.Button>
  <Listbox.Options>
    {options.map((opt) => (
      <Listbox.Option key={opt.id} value={opt}>
        {opt.name}
      </Listbox.Option>
    ))}
  </Listbox.Options>
</Listbox>

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

استكشف أدوات 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