الواجهات والتصميم

shadcn/ui Component Library

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

Claude Code Cursor Copilot Windsurf

نظرة عامة

shadcn/ui ليست مكتبة مكونات تقليدية تُثبَّت كاعتمادية. بل توفر مكونات مصممة بعناية وقابلة للوصول تُنسخ مباشرة إلى مشروعك لتملكها بالكامل. يمكن لعملاء الذكاء الاصطناعي إضافة المكونات عبر واجهة الأوامر، وتخصيصها لتتوافق مع نظام التصميم الخاص بك، وتركيب واجهات معقدة من اللبنات الأساسية.

مبنية على أساسيات Radix UI ومنسقة بـ Tailwind CSS، وكل مكون قابل للوصول بشكل افتراضي. يمكن لعميل الذكاء الاصطناعي تشغيل npx shadcn@latest add button dialog table لتثبيت المكونات، ثم تخصيص المتغيرات والألوان والسلوك مباشرة في الكود المصدري دون الصراع مع تجريدات المكتبة.

نهج امتلاك المكونات يعني عدم وجود تعارضات ترقية وتحكم كامل. يمكن لعملاء الذكاء الاصطناعي توسيع مكونات shadcn/ui بمتغيرات مخصصة، وإنشاء مكونات مركبة، وبناء تخطيطات نماذج مع تكامل React Hook Form، وتنفيذ جداول بيانات مع الفرز والتصفية والتصفح.

لمن هذه الأداة؟

مطورو React اللي بيبنوا لوحات تحكم وتطبيقات SaaS
فرق بتعمل أنظمة تصميم مخصصة مبنية على أساسيات قابلة للوصول
مطورين عايزين شكل حلو افتراضي مع تحكم كامل في التخصيص
مهندسين بيبنوا تطبيقات كتيرة النماذج مع validation متكامل

التثبيت

إعداد Claude Code

npx shadcn@latest init
npx shadcn@latest add button card dialog

الإعدادات

// components.json
{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "new-york",
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "src/app/globals.css",
    "baseColor": "zinc"
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils"
  }
}

زيارة المصدر (الموقع الرسمي)

استكشف أدوات AI

أدوات AI تكمل شغلك — للمصممين والمطورين

اقرأ مقالات عن AI

نصايح عملية في التصميم والذكاء الاصطناعي

أدوات مشابهة

الواجهات والتصميم

Figma MCP Server

تحويل تصاميم Figma إلى كود مباشرة مع الحفاظ على الأنماط والمكونات.

Claude Code Cursor Windsurf

الواجهات والتصميم

Storybook Component Docs

إنشاء توثيق تفاعلي لمكونات الواجهة مع أمثلة حية وحالات استخدام.

Claude Code Copilot Cursor

الواجهات والتصميم

Tailwind CSS IntelliSense

إكمال تلقائي ذكي لأصناف Tailwind مع معاينة الألوان والقيم أثناء الكتابة.

Claude Code Copilot Cursor