لنبدأ
كل ما تحتاجه للانتقال من الصفر إلى مشروع BoardUI يعمل، في صفحة واحدة: ما هو النظام، وكيفية تثبيته، وكيف يندمج وكيل الذكاء الاصطناعي، ومن أين تأتي الألوان والخطوط.
لماذا BoardUI
أنت تمتلك الشيفرة المصدرية
Components are copied into your project as plain React + Tailwind files. No runtime package, no lock-in, nothing you cannot open and edit.
مبني لوكلاء الذكاء الاصطناعي
An MCP server installs components on request, and always-on design rules keep your agent on the token system instead of inventing its own.
إمكانية الوصول بشكل افتراضي
Every form component builds on React Aria: labels, focus management, keyboard behavior, and ARIA wiring come included.
مُصمَّم في Figma أولاً
Every component starts as a finished Figma frame and lands in code pixel for pixel, carried by 400+ design tokens.
الوضع الداكن مدمج
Semantic tokens flip automatically under the .dark class. You never write a dark: override or a raw hex value.
كثيف البيانات منذ اليوم الأول
19 chart cards, dashboard blocks, and 10 full-page templates, made for products where the data is the interface.
التثبيت
هل تعمل في monorepo أو تستخدم أسماء مستعارة مخصصة للاستيراد؟ يمكنك التثبيت في حزمة واجهة مستخدم مشتركة. اتبع دليل إعداد monorepo قبل تشغيل هذه الأوامر.
أمر واحد يُعدّ أي مشروع React + Tailwind CSS v4: تبعيات وقت التشغيل، ورموز القالب، والأنماط العامة، و cx الأداة المساعدة، وقواعد تصميم الوكيل الدائم التشغيل.
npx boardui@latest initثم أضف المكوّنات حسب حاجتك؛ تُحلّ التبعيات الداخلية وحزم npm تلقائياً:
npx boardui@latest add button select date-pickerخادم MCP
BoardUI يدعم MCP: وصّل وكيلك مرة واحدة وسيتصفح جميع 104 مكوّنات مع أمثلة استخدام حقيقية، وإعداد مشروعك، وكتابة ملفات المصدر. يُفتح Pro في نفس المحادثة بمفتاح الترخيص الخاص بك.
المجاني وBoardUI Pro
المجاني
74 المكوّنات والكتل: أزرار ومدخلات وجداول وقوائم منسدلة ومحددات تاريخ وشريط جانبي وبطاقات مصادقة، بالإضافة إلى نظام الرموز والأنواع الكامل. مرخص بـ MIT، مشاريع غير محدودة، قابل للتثبيت عبر CLI أو MCP أو النسخ واللصق.
اللون
كل لون يرتكز على رمز دلالي للنصوص والأسطح والحدود والأيقونات والمخططات، بحيث تبدو المكوّنات كمنظومة واحدة ويكون الوضع الداكن تلقائياً. يُحرّك تدرج اللون الرئيسي أزرار الدعوة إلى الإجراء وحالات التحديد، ويمكن إعادة تلوينه ليناسب علامتك التجارية بتجاوز واحد.
مرجع الرموز الكاملالخطوط
يُشحن مقياس الخط في Figma كأدوات مركّبة: يضبط كل منها الحجم والوزن وارتفاع السطر والتباعد بين الأحرف معاً، بحيث يُختار الخط دفعةً واحدة دون تجميعه من text-sm font-medium مقاطع.
هل لديك أسئلة؟ اسأل على Discord ونجيب في العلن، عادةً في نفس اليوم.