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

من مشروع جديد إلى أول مكوّن يعمل.

طرازكت مكتبة كود للمطورين. كل مكوّن يثبت داخل مشروعك مع ثيماته وملفاته المساعدة، وتملك حرية تعديله. نستخدم مكوّنات shadcn وRadix كأساس للسلوك التفاعلي.

1. جهّز المشروع

ابدأ بمشروع يدعم React 19 وTypeScript وTailwind CSS 4. استخدم إصدار Node مدعومًا بأدوات مشروعك. مستودع الموقع نفسه يحتاج Node 22.13 أو أحدث.

إذا لم يكن مشروعك مهيّأً بـ shadcn، شغّل:

Terminal
pnpm dlx shadcn@latest init --base radix

وجود components.json يحدد للمثبت مسارات مجلداتك. دليل shadcn الرسمي ↗

2. أضف المكوّن من الرابط

اختر مدير الحزم، وانسخ الأمر ونفّذه داخل مشروعك. يقرأ المثبّت المكوّن من السجل ويضيف الكود والثيمات والاعتماديات تلقائيًا.

Terminal
pnpm dlx shadcn@latest add https://tirazkit.moud4477.chatgpt.site/r/button.json

يضيف الأمر مكوّن الزر، مزوّد الثيم، الأنماط، ونسخًا من المكوّنات الأساسية داخل components/tirazkit. إذا سبق وعدّلت ملفًا، راجع الفرق قبل الموافقة على استبداله.

3. أضف الثيم واستخدم المكوّن

example.tsx
"use client";
import { Theme } from "@/components/tirazkit/theme";
import { Button } from "@/components/tirazkit/button";

export default function Example() {
  return (
    <Theme theme="dga" locale="ar" mode="light">
      <Button onClick={() => alert("بدأت التجربة")}>
        ابدأ الخدمة
      </Button>
    </Theme>
  );
}

الاستيرادات هنا تفترض الاختصار @/. عدّلها حسب إعداد مشروعك. ملف أنماط طرازكت يستورد تلقائيًا مع المكوّنات. الخط يرث خط التطبيق، لذلك اختر خطًا يدعم العربية؛ الموقع يستخدم IBM Plex Sans Arabic بترخيص OFL.

اختصار اسم السجل

تقدر تستخدم اسمًا مختصرًا بدل كتابة الرابط في كل مرة. ادمج الإعداد التالي في components.json:

components.json — merge with existing config
{
  "registries": {
    "@tirazkit": "https://tirazkit.moud4477.chatgpt.site/r/{name}.json"
  }
}
Terminal
pnpm dlx shadcn@latest add @tirazkit/button
إتاحة رابط السجليجب أن يعيد الرابط ملف المكوّن دون طلب تسجيل دخول. إذا ظهرت صفحة دخول، فالنسخة خاصة؛ أداة التثبيت لا تستخدم جلسة المتصفح. أتح السجل للعامة عند نشر مكتبتك، أو استخدم التثبيت المحلي أدناه.
التثبيت المحلي للنسخ الخاصة

نزّل الحزمة إلى مجلد مشروعك، ثم نفّذ الأمر من المجلد نفسه.

تنزيل حزمة الأزرار
Terminal
pnpm dlx shadcn@latest add ./button.json

ما الذي يأتي مع كل حزمة؟

  • كود المكوّن نفسه المستخدم في المعاينة.
  • أربعة ثيمات ودعم الاتجاهين والمظهرين.
  • الأنماط والمكوّنات الأساسية ضمن مجلد طرازكت.
  • بيانات الاعتماديات وملف الترخيص.

القوالب تتبع طريقة التثبيت نفسها. لتوصيل نموذج بخادمك، مرّر دالة onSubmit التي تعيد تأكيدًا عند النجاح وترمي خطأ عند الفشل.