التوثيق · البدء

مقدمة

ما هو BoardUI؟

BoardUI هو مجموعة مفتوحة المصدر من مكوّنات React مبنية باستخدام Tailwind CSS ومصمَّمة في Figma. تُترجم المكوّنات مباشرةً من ملف Figma الرئيسي عبر خادم Figma MCP، مما يبقي التصميم والشيفرة متزامنَين.

تخطَّ مرحلة التصميم. فقط انسخ والصق وابنِ.

مجموعة التقنيات

  • React 19
  • Next.js 16 (App Router) — لموقع العرض
  • Tailwind CSS v4 (إعداد CSS-first عبر @theme)
  • TypeScript
  • React Aria Components — عناصر إمكانية الوصول الأساسية، تُضاف لكل مكوّن حسب الحاجة

المجاني مقابل المدفوع

  • المجاني — المكوّنات الأساسية (Button، Input، Checkbox، Badge، Avatar، إلخ). رخصة مرنة. مفتوح المصدر.
  • Pro — كتل مركّبة، قوالب صفحات، أنماط معقدة (جداول بيانات، قوائم أوامر، مخططات، لوحات تحكم). رسوم ترخيص لمرة واحدة.

مصدر لا تبعية

BoardUI ليس مكتبة وقت تشغيل. عند إضافة مكوّن، تُنسخ شيفرته المصدرية إلى مشروعك — لا npm install، ولا ارتباط بمورّد معين. أنت تمتلك الشيفرة؛ عدّلها كما تشاء.

كيف يُقارَن BoardUI بالمكتبات الأخرى

بنينا نافذة الإعدادات نفسها باستخدام BoardUI وتسع مكتبات أخرى، من shadcn/ui إلى PrimeReact، واختبرنا كلًّا منها. اقرأ مقارنتنا لأفضل 10 أنظمة تصميم لـ React (بالإنجليزية).

الخطوات التالية

توجّه إلى دليل التثبيت لإعداد مشروع، أو تصفح معرض المكوّنات.