التثبيت
أضف نمط DGA إلى مشروع جديد أو قائم عبر سطر أوامر shadcn.
الإصدار 0.2.0 ·
يحتاج كود المنصات إلى مشروع React مع Tailwind CSS v4. تستخدم هذه الخطوات Next.js، وتُذكر الأطر الأخرى في الختام.
مشروع جديد
أنشئ تطبيق Next.js
npx create-next-app@latest my-app --ts --tailwind --appهيّئ كود المنصات
npx shadcn@latest init https://dga.omqkhafi.dev/r/dga.jsonالعنصر dga من النوع registry:base. يكتب الملف components.json بالإعدادات iconLibrary: "hugeicons" وrtl: true ونمط Base UI والسجل @dga، فيعمل الأمر npx shadcn@latest add @dga/button مباشرة. ويثبّت @base-ui/react وcn وclass-variance-authority وHugeicons. كما يضيف كل رموز DGA والسمة الداكنة والأنماط المتجاوبة إلى globals.css، ويهيّئ خط IBM Plex Sans Arabic عبر next/font.
حدّد اللغة والاتجاه
<html lang="ar" dir="rtl">استخدم lang="en" dir="ltr" للصفحات الإنجليزية. لا تحتاج المكوّنات إلى أي تغيير آخر.
مشروع shadcn قائم
إن كان في المشروع ملف components.json، فأضف النمط مباشرة:
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-style.jsonيدمج سطر الأوامر قيم DGA في ملف globals.css الخاص بك. وتصبح متغيرات shadcn الموجودة لديك (--background و--primary …) مرتبطة برموز DGA.
الرموز فقط
لاستخدام رموز DGA دون أي مكوّن (مثلًا في نظام تصميم قائم)، أضف الرموز وحدها:
npx shadcn@latest add https://dga.omqkhafi.dev/r/dga-tokens.jsonاستخدام المساحة @dga
يسجّلها init …/dga.json لك. وفي المشاريع الأخرى سجّلها مرة واحدة في components.json:
{
"registries": {
"@dga": "https://dga.omqkhafi.dev/r/{name}.json"
}
}ثم ثبّت العناصر بأسمائها:
npx shadcn@latest add @dga/button @dga/badgeالوضع الداكن
تُطبَّق الرموز الداكنة تحت .dark (next-themes وshadcn) أو [data-theme="dark"] (عُرف موقع DGA). يعمل الاثنان على <html> أو على أي عنصر، فيمكن أن يكون قسم واحد داكنًا.
<section data-theme="dark">…</section>أطر أخرى
مع Vite أو React Router أو TanStack Start، شغّل أمر init نفسه. وخارج Next.js يثبّت سطر الأوامر الخط من @fontsource/ibm-plex-sans-arabic بدل next/font.
ما يُثبَّت
| العنصر | النوع | المحتوى |
|---|---|---|
dga | registry:base | إعدادات components.json (Hugeicons، واتجاه RTL، ونمط Base UI، والسجل @dga)، ويسحب dga-style |
dga-style | registry:style | الاعتماديات واستيرادات CSS وخريطة الأنماط cn-* للمكوّنات، ويسحب dga-tokens وutils والخط |
dga-tokens | registry:theme | كل الرموز، والسمتان الفاتحة والداكنة، والأنماط المتجاوبة، وسمة Tailwind، وربط shadcn، وطبقة الأساس |
utils | registry:lib | الملف lib/utils.ts الذي يعيد تصدير cn من الحزمة cn (دون clsx أو tailwind-merge) |
font-ibm-plex-sans-arabic | registry:font | خط IBM Plex Sans Arabic بالأوزان 400 إلى 700، مجموعتا الحروف العربية واللاتينية |