يوجد حاليًا الكثير من أطر عمل CSS مثل Bootstrap وBulma وSemantic UI وما إلى ذلك. والتي يمكن أن تسرع بناء العرض (واجهة المستخدم). إحدى أدوات CSS الرائجة حاليًا هي Shadcn/ui، ما الذي كانت عليه من قبل؟

على الموقع الرسمي Shadcn/ui تنص على

"مجموعة من المكونات القابلة لإعادة الاستخدام والتي يمكننا نسخها ولصقها في تطبيقاتنا."

لذا فإن shadcn/ui عبارة عن مجموعة من المكونات القابلة لإعادة الاستخدام في طرق العرض، والتي تم إنشاؤها باستخدام TailwindCSS وRadixUI. وهو يدعم حاليًا العديد من أطر العمل مثل Next.js وLaravel وما إلى ذلك. يمكن رؤيتها على الموقع الرسمي Shadcn/ui.

من بين العديد من الأطر المدعومة. هدفنا الرئيسي هو كيفية تثبيت Shadcn/ui على Laravel React، باستخدام Laravel Breeze.

الخطوة الأولى: تثبيت مشروع laravel.

laravel new laravel-shadcn

هنا نستخدم مثبت Laravel (العالمي). في المرحلة التالية سيُطلب منا تحديد خيار كما في الصورة أدناه

املأ وفقًا لاحتياجات مشروعك. إذا كان الأمر كذلك، فانتظر حتى يكتمل التثبيت. تعتمد سرعة التثبيت على اتصالك بالإنترنت.

اكتمل تثبيت مشروع Laravel. حسنًا، استمر!.

الخطوة الثانية: تثبيت Shadcn/ui على مشروع laravel

لا يزال في نفس المحطة. أولاً اكتب الأمر أدناه:

cd laravel-shadcn
npx shadcn-ui@latest init

إذا كان الأمر كذلك، سيظهر طلب وتعبئته وفقًا لاحتياجاتك. كالمثال التالي.

Would you like to use TypeScript (recommended)? no 
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › 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

إذا كنت من مستخدمي الآلة الكاتبة، فيمكنك اختيار نعم، موافق، التالي. انتقل إلى vscode أو وفقًا لمحرر التعليمات البرمجية المفضل لديك. هنا أستخدم vscode ثم استخدم الأمر التالي فقط

cd laravel-shadcn

code .

يفتح vscode تلقائيًا ويفتح مشروع laravel الخاص بك. إذا كان الأمر كذلك، فإن الخطوة التالية هي فتح ملف app.css في المجلد Resources/css/app.css للتأكد من تثبيت shadcnui بنجاح في مشروع Laravel الخاص بنا.

في الصورة أعلاه، تم تثبيت shadcn بنجاح على مشروع Laravel الخاص بنا.

توضيح :

• سيقوم Shadcn بتحديث ملف app.css تلقائيًا
• عندما نحتاج إلى مكونات مثل الأزرار والتنبيهات والجداول وما إلى ذلك. ثم نحتاج إلى تثبيته عبر المحطة الجذرية لمشروع Laravel الخاص بك. (يتطلب اتصال بالإنترنت)
• يمكن رؤية جميع المكونات التي تحتاجها على موقع ShadcnUI الرسمي
• عند الانتهاء من تثبيت المكونات، سنقوم تلقائيًا بإنشاء ملف جديد في المجلد Resources/js/Components/ui/Button.jsx ويمكننا أيضًا تعديل هذا الملف وفقًا لرغباتنا.

الخطوة الثالثة: التأكد من تثبيت Shadcn
للتأكد من تثبيت ShadcnUI، يمكننا إعطاء أمر في الوحدة الطرفية. على سبيل المثال، سنقوم بتثبيت مكون الزر، الأمر هو: npx shadcn-ui@latest add Button يمكن رؤيته في الصورة أدناه

ثم قم بفتح ملف Welcome.jsx واتبع كما في الصورة أدناه.

إذا كان الأمر كذلك بالفعل. افتح محطتين بنفس الدليل وهما laravel-shadcn

المحطة 1

npm run dev

المحطة 2

php artisan serve

ثم افتحه في المتصفح وسيظهر مكون الزر الذي الافتراضي باللون الداكن.