الإلهام

تصفح القوالب والكتل والأنماط المنتقاة: Awesome shadcn

مراجع منتقاة لتوجيه UI/UX والمنتج. نستلهم بشكل كبير من أنماط shadcn ومنتجات SIS/MIS الواقعية.

المدرسة

• Next.js School Management Dashboard UI Design Tutorial | React Next.js Responsive Admin Dashboard — الجزء 1 · الجزء 2
• Build a Nextjs Learning Management App | AWS, Docker, Lambda, Clerk, DynamoDB, ECR, S3, Shadcn, Node — YouTube
• School Pro - Building School Management system Next.js & Express | Student Attendance Module EP39 — قائمة التشغيل
• All Functional MERN Stack LMS / Learning Management system series with Next 13, TypeScript | Part 1 — YouTube
• All Functional MERN Stack LMS / Learning Management system series with Next 13, TypeScript | Part 2 — YouTube
• SAAS LMS With Custom Domains & Affiliates - Nextjs15, Uploadcare, Clerk, Cloudways, Supabase — YouTube
• Mern Stack School Management System with React, Node, MongoDB, Express and Styled Components — YouTube
• Build Full Stack NextJs Student Attendance Tracking App | React, MySql, Tailwind CSS, Drizzle ORM — YouTube
• Next-Gen School Management System | Built for Simplicity. Powered by Modern Tech — YouTube

لوحة التحكم

• عناصر Shadcn الأساسية: Card · Tabs · Table · Button · Separator

• مثال لوحة تحكم shadcn/ui

• Shadcn Admin (عرض)

• Shadcn Dashboard – نظرة عامة

• YouTube: بناء لوحة تحكم Shadcn

• YouTube: لوحة تحكم Shadcn (مقطع)

• Figma – أفكار تخطيط لوحات التحكم

• مجتمع Figma: واجهة لوحة التحكم

• Pinterest: إلهام واجهة لوحة التحكم

• مشاريع GitHub الشائعة:

  • بحث: shadcn dashboard (بالنجوم تنازلياً)
  • بحث: nextjs dashboard shadcn (بالنجوم تنازلياً)
  • بحث: admin dashboard shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn ui dashboard
  • بحث YouTube: shadcn admin dashboard
  • بحث YouTube: next.js dashboard shadcn

الجدول (القوائم)

• عناصر Shadcn الأساسية: Table · Dropdown Menu · Badge · Input

• جدول البيانات العام (توثيقنا)

• مثال جدول البيانات – المهام (shadcn/ui)

• مكون الجدول (shadcn/ui)

• مجتمع Figma: واجهة الجدول/القائمة

• Pinterest: إلهام واجهة الجدول/القائمة

• مشاريع GitHub الشائعة:

  • بحث: shadcn table tanstack (بالنجوم تنازلياً)
  • بحث: data table shadcn (بالنجوم تنازلياً)
  • بحث: react table shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn ui table
  • بحث YouTube: tanstack table shadcn
  • بحث YouTube: data table nextjs shadcn

الإعداد

• عناصر Shadcn الأساسية: Dialog · Sheet · Form · Progress · Button

• نمط الإعداد (توثيقنا)

• Dialog (shadcn/ui) · Sheet

• Form (shadcn/ui)

• مجتمع Figma: تدفق الإعداد

• Pinterest: إلهام UX الإعداد

• مشاريع GitHub الشائعة:

  • بحث: onboarding shadcn (بالنجوم تنازلياً)
  • بحث: nextjs onboarding wizard (بالنجوم تنازلياً)
  • بحث: stepper shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn ui onboarding
  • بحث YouTube: nextjs onboarding wizard shadcn
  • بحث YouTube: multi step form shadcn

النماذج

• عناصر Shadcn الأساسية: Form · Input · Select · Textarea · Checkbox · Radio Group · Button

• Form (shadcn/ui)

• المدخلات: Input · Select · Textarea · Checkbox · Radio Group

• مجتمع Figma: مجموعة واجهة النماذج

• Pinterest: إلهام واجهة النماذج

• مشاريع GitHub الشائعة:

  • بحث: shadcn form react hook form (بالنجوم تنازلياً)
  • بحث: zod shadcn form (بالنجوم تنازلياً)
  • بحث: form builder shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn ui form react hook form
  • بحث YouTube: zod shadcn form
  • بحث YouTube: nextjs forms shadcn

الإشعارات

• عناصر Shadcn الأساسية: Toast · Alert · Alert Dialog

• Toast (shadcn/ui)

• Alert (shadcn/ui)

• مجتمع Figma: الإشعارات/toasts

• Pinterest: إلهام الإشعارات

• مشاريع GitHub الشائعة:

  • بحث: shadcn toast (بالنجوم تنازلياً)
  • بحث: shadcn alert dialog (بالنجوم تنازلياً)
  • بحث: notifications shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn ui toast
  • بحث YouTube: shadcn ui alert dialog
  • بحث YouTube: notifications shadcn

المدفوعات (واجهة Stripe)

• عناصر Shadcn الأساسية: Card · Form · Input · Button · Dialog · Sheet · Skeleton

• استخدم Dialog/Sheet لتدفقات الدفع وSkeleton لحالات التحميل

• شاهد المزيد من كتل المجتمع: Awesome shadcn (اختيارنا)

• مجتمع Figma: الدفع/checkout

• Pinterest: إلهام واجهة الدفع

• مشاريع GitHub الشائعة:

  • بحث: nextjs stripe shadcn (بالنجوم تنازلياً)
  • بحث: saas starter stripe shadcn (بالنجوم تنازلياً)
  • بحث: checkout shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: stripe checkout nextjs shadcn
  • بحث YouTube: subscriptions stripe shadcn
  • بحث YouTube: payment form shadcn

تخزين الملفات وإدارتها

• عناصر Shadcn الأساسية: Input (file) · Card · Dialog · Dropdown Menu · Progress · Badge

• رفع الملفات، إدارة المنظمات، وأنماط التفويض القائمة على الأدوار

• مميز: FileDrive بواسطة webdevcody — تطبيق تخزين ملفات مع منظمات ورفع ملفات وإدارة وتفويض قائم على الأدوار

• مجتمع Figma: واجهة مدير الملفات/التخزين

• Pinterest: إلهام واجهة تخزين الملفات

• مشاريع GitHub الشائعة:

  • بحث: file storage nextjs shadcn (بالنجوم تنازلياً)
  • بحث: file manager nextjs (بالنجوم تنازلياً)
  • بحث: file upload shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: file storage nextjs
  • بحث YouTube: file upload ui shadcn
  • بحث YouTube: file manager dashboard

واجهة تحليل PDF

• عناصر Shadcn الأساسية: Input (file) · Dialog · Scroll Area · Textarea · Progress

• اجمع بين الواجهة ومكتبة PDF (مثل react-pdf) مع الحفاظ على تنسيق shadcn

• مجتمع Figma: عارض المستندات/رفع الملفات

• Pinterest: واجهة عارض المستندات/PDF

• مشاريع GitHub الشائعة:

  • بحث: nextjs pdf viewer
  • بحث: react pdf parser
  • بحث: pdf upload ui

• YouTube الشائع:

  • بحث YouTube: react pdf viewer ui
  • بحث YouTube: pdf upload parse nextjs
  • بحث YouTube: document viewer ui design

الرواتب

• عناصر Shadcn الأساسية: Table · Badge · Dropdown Menu · Calendar · Alert Dialog

• مدخلات التاريخ: Calendar

• تدفقات التصدير/الموافقة: Alert Dialog

• مجتمع Figma: لوحة تحكم الرواتب

• Pinterest: إلهام واجهة الرواتب

• مشاريع GitHub الشائعة:

  • بحث: payroll dashboard nextjs
  • بحث: hrms nextjs shadcn
  • بحث: finance dashboard shadcn

• YouTube الشائع:

  • بحث YouTube: payroll dashboard ui
  • بحث YouTube: salary management ui
  • بحث YouTube: finance dashboard shadcn

الفواتير

• عناصر Shadcn الأساسية: Card · Table · Badge · Dropdown Menu · Dialog

• الإجراءات: Dropdown Menu · Dialog

• انظر نمط القائمة القابل لإعادة الاستخدام: جدول البيانات العام (توثيقنا)

• مجتمع Figma: قوالب الفواتير

• Pinterest: إلهام واجهة الفواتير

• مشاريع GitHub الشائعة:

  • بحث: invoice nextjs shadcn (بالنجوم تنازلياً)
  • بحث: invoicing saas nextjs (بالنجوم تنازلياً)
  • بحث: billing dashboard shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: invoice app nextjs
  • بحث YouTube: invoice ui shadcn
  • بحث YouTube: billing dashboard ui

روبوت المحادثة

• عناصر Shadcn الأساسية: Scroll Area · Textarea · Input · Button · Avatar · Skeleton · Separator · Badge

• إضافات: Avatar، Skeleton، Separator، Badge

• استكشف كتل الدردشة المجتمعية في: Awesome shadcn (اختيارنا)

• مجتمع Figma: واجهة الدردشة

• Pinterest: إلهام واجهة الدردشة

• مشاريع GitHub الشائعة:

  • بحث: chatbot nextjs shadcn (بالنجوم تنازلياً)
  • بحث: ai chat nextjs shadcn (بالنجوم تنازلياً)
  • بحث: chat ui shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn chat ui
  • بحث YouTube: nextjs ai chat shadcn
  • بحث YouTube: chat interface ui design

المصادقة

• عناصر Shadcn الأساسية: Form · Input · Button · Card · Input OTP · Dialog · Sheet · Toast

• الدليل الداخلي: المصادقة (توثيقنا)

• العناصر الأساسية: Form · Input · Button · Card

• MFA والتدفقات: Input OTP، Dialog، Sheet، Toast

• مزودو التواصل الاجتماعي: استخدم نفس عناصر النماذج الأساسية مع أزرار المزودين (متغيرات [Button] المُنسقة)

• مجتمع Figma: شاشات المصادقة/تسجيل الدخول

• Pinterest: إلهام واجهة المصادقة

• مشاريع GitHub الشائعة:

  • بحث: nextauth shadcn (بالنجوم تنازلياً)
  • بحث: authjs shadcn (بالنجوم تنازلياً)
  • بحث: login template shadcn (بالنجوم تنازلياً)

• YouTube الشائع:

  • بحث YouTube: shadcn nextauth
  • بحث YouTube: authjs shadcn nextjs
  • بحث YouTube: login ui shadcn

---

المشهد التنافسي

• iSAMS – نظام معلومات إدارة المدرسة
• Education Horizons – مجموعة الحلول
• eSkooly – نظام إدارة المدرسة
• Classe365 – عملاء برنامج إدارة المدرسة

ملاحظة: هذه الروابط هي مصادر إلهام UI/UX وبحث السوق فقط. نحن لا ندعي الانتماء أو التأييد من قبل المنتجات المُشار إليها.