مقاعد الترخيص
إدارة جهاز
حرّر المقعد الحالي قبل تفعيل ترخيصك على جهاز آخر.
npx boardui@latest logoutمرحبًا بك في BoardUI Pro
شكراً لعملية الشراء. يتيح لك ترخيصك الوصول إلى جميع مكوّنات وقوالب Pro، بما في ذلك التحديثات المستقبلية. لنبدأ بتشغيل كل شيء في مشروعك.
ابدأ من الصفر
يفترض هذا الدليل التفصيلي أن BoardUI لم يُثبَّت في مشروعك من قبل. اتبع كل خطوة بالترتيب وستنتهي بالأسس والتبعيات المجانية والوصول إلى Pro وأول مكوّن أو قالب جاهز للاستخدام.
- افتح مشروعك - أو أنشئ مشروعاً جديداً.
يعمل BoardUI في مشروع React 19 + Tailwind CSS v4. إن لم يكن لديك مشروع بعد، فأسرع نقطة انطلاق هي تطبيق Next.js جديد:
npx create-next-app@latest my-appcd my-app # Choose the defaults: TypeScript, Tailwind CSS, App Router, and @/* aliasهل لديك مشروع متوافق بالفعل؟ افتح طرفية في مجلده الجذر وتابع أدناه. لـ Vite أو React Router أو Astro، راجع أدلة الأطر.
لحزمة واجهة مستخدم مشتركة أو أسماء مستعارة مخصصة، اتبع دليل إعداد monorepo قبل تشغيل init. تستخدم مكوّنات المجاني وPro نفس
boardui.jsonconfig. شغّل عمليات تثبيت المكوّنات داخل الحزمة المشتركة، وثبّت القوالب كاملة الصفحة في التطبيق المستهلك. - تهيئة BoardUI وتثبيت جميع التبعيات المطلوبة.
npx boardui@latest init --proأكّد موجه الإعداد. يقوم CLI بتثبيت Tailwind v4 وحزمتَي وقت التشغيل و Pro الخاصتين بـ BoardUI، ثم ينشئ السمة والطباعة والأنماط العامة والأدوات المساعدة المشتركة. لا تحتاج إلى تثبيت المكتبة المجانية بشكل منفصل.
- ربط أنماط BoardUI المُنشأة.
استبدل استيراد CSS العام الافتراضي في التخطيط الجذري وحمّل Inter، الخط الذي تقرؤه سمة BoardUI. وإذا لم يكن في مشروعك ما يترجم Tailwind v4 بعد، فحمّل أيضًا إضافة PostCSS الخاصة به. يترجمه create-next-app 16.4 وما بعده بالفعل عبر
@tailwindcss/turbopack، ولا يطبع init خطوة PostCSS إلا عند الحاجة إليها.// app/layout.tsximport { Inter } from "next/font/google";import "@/styles/globals.css"; // replaces the default "./globals.css" import // BoardUI's theme reads its typeface from --font-inter (styles/theme.css).// The opsz axis renders display sizes in Inter Display, as on boardui.com.const inter = Inter({ variable: "--font-inter", subsets: ["latin"], axes: ["opsz"],}); export default function RootLayout({ children }: { children: React.ReactNode }) { return ( // On <html>, where theme.css resolves the font, in place of the Geist variables. <html lang="en" className={`${inter.variable} h-full antialiased`}> <body className="min-h-full flex flex-col">{children}</body> </html> );} - قم بتفعيل مفتاح الترخيص الوارد في بريد الشراء الإلكتروني.
npx boardui@latest login YOUR_LICENSE_KEYاستبدال
YOUR_LICENSE_KEYمع المفتاح الحرفي. لا تضمّن الأقواس الزاوية. يستخدم التفعيل أحد مقاعد الأجهزة المضمّنة في ترخيصك. - ثبّت أول مكوّن Pro لديك.
npx boardui@latest add agent-progress calendarيقوم هذا الأمر بتثبيت كلا المثالين. استخدم اسمًا واحدًا إذا أردت مثالًا واحدًا فقط. تجلب واجهة CLI أيضًا كل مكوّن أو أداة مساعدة مجانية من BoardUI تعتمد عليها، وتعرض تثبيت حزم npm المفقودة - لا توجد خطوة إعداد منفصلة للمكوّنات المجانية.
- أو ثبّت قالب Pro كاملاً.
npx boardui@latest add template-ai-chatتتضمن القوالب الصفحة ومصدر المكوّن والتبعيات المجانية وكتل Pro والصور. يمكنك تثبيت المكوّنات أو القوالب أو كليهما بنفس الترخيص.
الحفاظ على تحديث مصدرك
يقوم BoardUI بتثبيت الشيفرة المصدرية القابلة للتعديل بدلاً من حزمة مكوّنات مقيّدة. لاستبدال عنصر مثبّت بأحدث إصدار له في BoardUI، شغّل الأمر نفسه مع --overwrite وراجع أي تخصيصات محلية أولاً.
npx boardui@latest add calendar --overwriteالمقاعد والتكامل المستمر والدعم
انقل ترخيصك بين الأجهزة، وأتمت عمليات التثبيت، أو تواصل معنا مباشرةً عند الحاجة إلى المساعدة.
الأتمتة
استخدمه في CI
أضف ترخيصك كمتغير بيئة سري. لا حاجة لتسجيل الدخول التفاعلي.
BOARDUI_LICENSE_KEYدعم مباشر
DM @sitenleyهل تحتاج إلى مساعدة؟
أرسل لي رسالة مباشرة على X مع بريدك الإلكتروني للطلب ووصف مختصر لما يحدث.