تكامل ShadCN CLI
ثبّت Babelize Elements عبر CLI الخاص بـ shadcn: أضف سجل @babelize، ثم اسحب مبدّلات اللغة والحقول وأدوات الترجمة إلى مشروعك.
ثبّت مكوّنات Babelize Elements الفردية مباشرةً في مشروعك باستخدام CLI الخاص بـ shadcn.
سجل @babelize
Babelize Elements مدرجة في دليل سجلات shadcn باسم @babelize، لذا يجدها CLI الخاص بـ shadcn دون أي إعداد.
على CLI أقدم، أو لتثبيت السجل صراحةً، أضفه إلى حقل registries في components.json لديك:
{
"registries": {
"@babelize": "https://elements.babelize.co/r/{name}.json"
}
}تثبيت مكوّن
ثبّت أي مكوّن:
npx shadcn@latest add @babelize/language-switcher
npx shadcn@latest add @babelize/language-switcher-pill
npx shadcn@latest add @babelize/phone-input
npx shadcn@latest add @babelize/navbarيحل CLI تبعيات كل مكوّن ويكتب كل ملف إلى الاسم المستعار الذي يحدده نوعه، فالمكوّنات تذهب إلى الاسم المستعار ui الخاص بك، والخطافات المشتركة مثل useControllableState وuseListboxNavigation تذهب إلى lib. إذا نقلت ui في components.json، تتبعه المكوّنات.
ملف `cn` لا يُمسّ
تستورد المكوّنات cn عبر الاسم المستعار utils الخاص بك، وتفترض أنه موجود مسبقًا، وهو الافتراض نفسه الذي تفترضه مكوّنات shadcn، إذ إن shadcn init يُنشئه. لا يُكتب فوق نسختك أبدًا، مهما خصّصتها.
يكتب CLI @babelize/elements المرفق أيضًا cn لك إذا كان الملف مفقودًا فعلًا، لذا يعمل في المشاريع التي لم تشغّل فيها shadcn init قط.
يمكنك أيضًا التثبيت عبر عنوان URL مباشر:
npx shadcn@latest add https://elements.babelize.co/r/language-switcher.jsonاستيراد
import { LanguageSwitcher } from "@/components/ui/language-switcher";استخدام CLI الخاص بـ Babelize Elements
تفضّل CLI مخصصًا؟ تأتي حزمة @babelize/elements مع واحد:
npx @babelize/elements add language-switcher
npx @babelize/elements listيؤدي المهمة نفسها: يحل عنصر السجل، ويكتب المكوّن إلى components/ui/، ويثبّت تبعيات npm الخاصة به.