التثبيت

يُثبَّت Ritla UI كمصدر. تنسخ أداة سطر الأوامر كل مكوّن إلى مشروعك، وتثبّت ما يعتمد عليه، وتهيّئ رموز الثيم مرة واحدة، فيكون الكود ملكك تقرؤه وتعدّله.

المتطلبات#

• مشروع React يستخدم Tailwind CSS v4: Next.js أو Vite.
• Node.js ومدير حزم (npm أو pnpm أو yarn أو bun).
• مفتاح ترخيص Ritla UI للعناصر المدفوعة. أما العناصر المجانية مثل @ritla/core فلا تحتاج مفتاحًا.

هيّئ مشروعك#

شغّل هذا الأمر مرة واحدة في جذر تطبيقك:

npx ritla init

يتعرّف الأمر على إطار العمل وإعداد Tailwind واختصارات الاستيراد، ويكتب ملف ritla.json يحفظها، ويضيف رموز ثيم كنز إلى ملف CSS، ويثبّت @ritla/core: أداة عزل الاتجاه، ومنسّق الأرقام، وإعداد الخط العربي الذي يقوم عليه كل مكوّن.

أضف المكوّنات#

npx ritla add phone-input card-details button

يصل كل مكوّن إلى مجلد المكوّنات في مشروعك ملفًا تملكه. المكوّنات التي تستخدم مكوّنات أخرى تجلبها معها، وتُثبَّت اعتمادياتها من npm تلقائيًا. وفي صفحة كل مكوّن تجد أمره بالضبط تحت «التثبيت».

مفتاح الترخيص#

لا تُقدَّم العناصر المدفوعة إلا لطلب يحمل مفتاح ترخيصك. احفظ المفتاح في متغيرات البيئة، لا في المستودع أبدًا:

RITLA_LICENSE_KEY=your-key npx ritla add phone-input

يرشدك الأمر npx ritla login إلى حفظه على جهازك، وتقرؤه بيئة التكامل المستمر من أسرارها الخاصة.

إن كنت تستخدم shadcn#

يعتمد السجل صيغة shadcn، فتستطيع أداة shadcn والأدوات المبنية عليها تثبيت Ritla UI أيضًا. سجّل النطاق @ritla في components.json:

{
  "registries": {
    "@ritla": {
      "url": "https://ritla.app/r/{name}.json",
      "headers": { "Authorization": "Bearer ${RITLA_LICENSE_KEY}" }
    }
  }
}

ثم أضف المكوّنات بأسمائها:

npx shadcn@latest add @ritla/phone-input

أداة ريتلا هي الطريق الأساسي، وهذا الطريق للمشاريع التي تعمل على shadcn أصلًا.