📋 محتويات الصفحة
📖 الوصف
shadcn/ui ليست مكتبة تقليدية – إنها مجموعة من المكونات القابلة للنسخ واللصق. بدلاً من تثبيتها كـ dependency، تنسخ الكود مباشرة إلى مشروعك. مبنية على Radix UI (logic) و Tailwind CSS (styling). هذا النهج يوفر تحكم كامل في الكود مع مكونات احترافية وaccessible. shadcn/ui أصبحت الخيار الأول للعديد من ال...
🎯 يستخدم في
مجالات استخدام هذه الأداة
React/Next.js projects
Projects تحتاج تحكم كامل في الكود
Modern web applications
Custom component libraries
Projects تستخدم Tailwind CSS
✨ المميزات
أبرز مميزات هذه الأداة
Copy-paste components
مبني على Radix UI (accessible)
Tailwind CSS styling
تحكم كامل في الكود
TypeScript support
Dark mode مدمج
Forms integration (React Hook Form)
CLI للتثبيت (npx shadcn)
Used by Vercel
Linear
Cal.com
⚠️ العيوب
نقاط يجب مراعاتها
ليس dependency – يحتاج copy لكل مشروع
يحتاج Tailwind CSS
يحتاج React
Less abstraction (قد يحتاج المزيد من الكود)
Newer project (أقل نضجاً)
🔄 البدائل
أدوات بديلة يمكنك استخدامها
💻 مثال على الاستخدام
كيفية استخدام هذه الأداة
# Install CLI
npx shadcn@latest init
# Add components
npx shadcn@latest add button
npx shadcn@latest add dialog📚 أدوات أخرى في UI-Libraries
قد يعجبك أيضاً
Ant Design
⭐مكتبة مكونات Enterprise (Enterprise UI Component Library)
Ark UI
مكتبة مكونات Headless (Headless UI Component Library)
Base UI
مكتبة مكونات headless من MUI (Headless UI Components from MUI)
Chakra UI
⭐مكتبة مكونات واجهة بسيطة (Accessible UI Component Library)
DaisyUI
⭐مكتبة مكونات قائمة على utility classes (Component Class Library)
Fluent UI
⭐مكتبة مكونات Microsoft (Microsoft Design System)