ما هو shadcn/ui؟

عبارة عن مكونات قابلة لإعادة الاستخدام تم إنشاؤها باستخدام Radix UI و Tailwind CSS.

• Radix UI - مكونات غير مصممة و مبنية لتسهيل عملية الوصول والأستخدام لبناء أنظمة تصميم وتطبيقات ويب عالية الجودة ل React
• Tailwind CSS - إطار CSS معبأ بكلاسات CSS المساعدة التي يمكن استخدامها لبناء أي تصميم.

لماذا shadcn/ui؟

باستخدام shadcn/ui يمكنك اختيار المكون الذي تحتاجه. انسخ والصق العنصر في المشروع الخاص بك يمكنك تخصيص المكون كما تريد.

فوائد

هناك الكثير من الفوائد عند استخدام shadcn/ui لأنه يستخدم Radix UI في الأساس الذي يوفر الكثير من تحسينات إمكانية الوصول ولكن أيضًا مزايا أخرى مثل:

• المكونات المخصصة ستكون مدرجة في المشروع الخاصة بك.
• يمكنك تعديل التصميم بسهولة مع Tailwind CSS.
• قم بتوسيع وضائف المكون كما تريد.

كيف تستخدمه؟

هناك خياران لاستخدام shadcn/ui:

1. انسخ / الصق المكون المطلوب.
2. استخدام CLI (سهل الاستخدام بعد التكوين).

سأعرض مثالاً على كيفية استخدام shadcn/ui مع Vite ولكن يمكنك رؤية قائمة الأطر المدعومة وخطوات التكوين هنا.

إنشاء مشروع Vite

تثبيت

npm create vite@latest

√ Select a framework: » React
√ Select a variant: » TypeScript

إضافة Tailwind CSS

هذا أمر ضروري لأن جميع المكونات مُصممة بـ Tailwind CSS لذا نحتاج إلى التأكد من تثبيته ثم إنشاء ملفات tailwind.config.js و postcss.config.js.

تثبيت

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

تعديل tsconfig.json

ضمن compilerOptions في ملف tsconfig.json ، نحتاج إلى الكود التالي لحل المسارات دون أي مشاكل.

تعديل المسار

{
  "compilerOptions": {
	  "baseUrl": ".",
	  "paths": {
	     "@/*": ["./src/*"]
	  }
  }
}

تحديث vite.config.ts

نحتاج إلى استيراد path في ملف vite.config.ts ولحل المسارات بدون أخطاء نحتاج إلى إضافة أنواع Node.js.

تثبيت

# (so you can import "path" without error)
npm i -D @types/node

استيراد path

import path from "path"
import react from "@vitejs/plugin-react"
import { defineConfig } from "vite"

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
})

تعديل settings.json

لن يقوم الاستيراد التلقائي في Visual Studio باستيراد الملفات إلا باستخدام المسارات النسبية ولكن إذا أردنا استيراد الملفات باستخدام الاسم المستعار ، نحتاج إلى إضافة هذا السطر 👇

"typescript.preferences.importModuleSpecifier": "non-relative"

أضف Shadcn/ui

لاستخدام Shadcn/ui CLI نحتاج إلى تشغيل أمر التثبيت. ثم سيكون لدينا قائمة من الأسئلة لإضافة الملفات اللازمة لمشروعك.

تثبيت

npx shadcn-ui@latest init

التكوين

√ Would you like to use TypeScript (recommended)? ... no / yes
√ Which style would you like to use? » Default
√ Which color would you like to use as base color? » Zinc
√ Where is your global CSS file? ... @/index.css
√ Would you like to use CSS variables for colors? ... no / yes
√ Where is your tailwind.config.js located? ... tailwind.config.js
√ Configure the import alias for components: ... @/components
√ Configure the import alias for utils: ... @/lib/utils
√ Are you using React Server Components? ... no / yes
√ Write configuration to components.json. Proceed? ... yes

ملف CSS الرئيسي عند استخدام Vite تم تعيينه على index.css لهذا السبب بالنسبة لخيارات ملف global.css ، أخترت index.css ولكن يمكنك الإشارة إلى ملف global.css أو إعادة تسميته إلى ما تريد.

إضافة مكونات

يمكنك رؤية جميع مكونات shadcn/ui هنا. لتثبيت مكون ، يمكنك استخدام هذا الأمر متبوعًا باسم المكون:

npx shadcn-ui@latest add [component]

ستتم إضافة جميع المكونات داخل مجلد components/ui جاهز للتكوين وإعادة التصميم والاستخدام.

تعديل التصميم

يمكنك تكوين أنماط المكونات الخاصة بك من index.css أو global.css بسهولة عن طريق تغيير متغيرات الroot إلى أي لون تريده أو تعديل التصميم مباشرة من المكون.