shadcn/ui مع React: مكوّنات جاهزة بتصميم احترافي

إذا كنت تحب Tailwind لكن لا تريد بناء كل مكوّن من الصفر، فـ shadcn/ui حل ممتاز: مكوّنات جاهزة بتصميم أنيق، والأهم أنك تملك الكود بالكامل داخل مشروعك.

في هذا الدرس سنفهم: ما هي shadcn/ui؟ وكيف تختلف عن مكتبات UI التقليدية؟ وكيف تضيف مكوّنات بسرعة داخل مشروع React.

لماذا shadcn/ui مختلفة؟

• تأخذ الكود وتضعه في مشروعك بدل استيراد مكتبة مغلقة.
• مبنية على Tailwind + Radix UI لواجهة جميلة وسلوكية صحيحة.
• حرية كاملة في التخصيص بدون قيود.

الفكرة الأساسية: مكوّنات قابلة للنسخ والتعديل

بدل أن تقول: "استورد مكتبة كبيرة"، shadcn/ui تقول: انسخ المكوّن وضعه عندك وعدّل عليه كما تريد.

الخطوة 1: المتطلبات

• مشروع React (يفضل Vite أو Next.js).
• Tailwind CSS مُجهّز مسبقًا.

الخطوة 2: تهيئة shadcn/ui

npx shadcn@latest init

هذا الأمر يجهّز ملفات الإعدادات اللازمة داخل مشروعك.

الخطوة 3: إضافة مكوّن

npx shadcn@latest add button

عندها ستحصل على ملف مكوّن Button داخل مجلد components/ui.

مثال عملي سريع

import { Button } from "@/components/ui/button";

function App() {
  return (
    <div className="p-6">
      <Button>ابدأ الآن</Button>
    </div>
  );
}

تخصيص المكوّن بسهولة

لأن الكود أصبح لديك، يمكنك تعديل الستايل كما تريد:

// components/ui/button.tsx
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition",
  {
    variants: {
      variant: {
        default: "bg-blue-600 text-white hover:bg-blue-700",
        ghost: "bg-transparent hover:bg-blue-50",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
);

متى أستخدم shadcn/ui؟

• عندما تريد UI احترافي بسرعة دون فقدان التحكم.
• عندما تحتاج مكوّنات جاهزة مع إمكانية تعديلها بعمق.
• عندما لا تريد الاعتماد على مكتبة ضخمة يصعب تخصيصها.

أفضل الممارسات

• احتفظ بتعديلاتك في نفس مكوّنات components/ui.
• اجعل لديك دليل تصميم صغير (ألوان، مسافات) لتناسق الواجهة.
• أضف المكوّنات التي تحتاجها فقط بدل تثبيت الكل.

الأسئلة الشائعة — FAQ

ما هي shadcn/ui؟

مجموعة مكوّنات UI تأخذ الكود منها وتضعه داخل مشروعك.

هل shadcn/ui مكتبة مثل Material UI؟

لا، هي نظام مكوّنات قابل للنسخ والتعديل بدل الاعتماد على مكتبة جاهزة.

هل تحتاج Tailwind لاستخدام shadcn/ui؟

نعم، لأنها تعتمد على Tailwind في التنسيق.

ما الفرق بين shadcn/ui و Tailwind فقط؟

Tailwind يعطي أدوات تنسيق، بينما shadcn/ui يعطي مكوّنات كاملة جاهزة.

هل يمكن استخدام shadcn/ui في مشاريع كبيرة؟

نعم، لأنها تمنحك تحكمًا كاملاً وتخصيصًا عميقًا.