emblor - مكون إدخال علامات قابل للتخصيص بدرجة كبيرة ويمكن الوصول إليه ومتكامل الميزات ومُصمم باستخدام shadcn/ui.
زر محسّن - نسخة محسنة من مكون زر shadcn الافتراضي.
منطقة فاخرة - منطقة Textarea مستوحاة من قسم تعليقات العلاقات العامة في GitHub. الجزء المثير للإعجاب هو دعم @mention بما في ذلك بطاقات التمرير في المعاينة. الهدف هو إعادة إنتاجه بدون مكتبة محرر النصوص.
يتوهم بوكس - Combobox مستوحى من محدد تسمية العلاقات العامة في GitHub ويتم تشغيله بواسطة shadcn/ui. جميع العناصر تقريبًا عبارة عن مكونات جذرية لواجهة المستخدم، مُصممة باستخدام tailwindcss.
يتوهم متعدد التحديد - مكون التحديد المتعدد مستوحى من نماذج إعدادات موقع الويب Campsite.design وموقع cal.com.
Fancy-switch - مكون تبديل فاخر تم تصميمه باستخدام shadcn/ui.
Farmui - حل مكتبة مكونات متحركة ومصمم بشكل جميل ومبني على shadcn وtailwindcss مع حزمة npm الخاصة به لتثبيت أي مكون في تسجيل المكونات.
maily.to - قم بصياغة رسائل بريد إلكتروني جميلة دون عناء باستخدام فكرة مثل المحرر القوي.
Mini-tiptap - محرر WYSIWYG بسيط مصمم باستخدام shadcn/ui وtiptap.
mixcnui - Mixui عبارة عن مجموعة من المكونات المتحركة أو القابلة لإعادة الاستخدام حاليًا لـ Nextjs.
mynaui - TailwindCSS ومجموعة أدوات واجهة المستخدم shadcn/ui لـ Figma وReact.
مكونات الوحشية الجديدة - مجموعة من مكونات Tailwind React وshadcn/ui المصممة على طراز الوحشية الجديدة.
مكونات nextjs - مجموعة من مكونات Next.js التي تم إنشاؤها باستخدام TypeScript وReact وshadcn/ui وCraft UI وTailwind CSS.
nextjs-dnd - سحب وإسقاط قابل للفرز باستخدام Next.js وshadcn/ui وdnd-kit.
nextjs-link-pagination - ترحيل صفحات/ترحيل صفحات shadcn يستخدم روابط Nextjs ومعلمات البحث
next-shadcn-dashboard-starter - لوحة تحكم المشرف مع Nextjs 14 وShadcn UI
رواية - Novel عبارة عن محرر WYSIWYG على طراز Notion مع الإكمال التلقائي المدعوم بالذكاء الاصطناعي. تم تصميمه باستخدام Tiptap + Vercel AI SDK.
تدفق الأرقام - مكون React لنقل الأرقام وتعريبها وتنسيقها. خالية من التبعية. يمكن الوصول إليها. قابلة للتخصيص.
Origin-ui - مكونات جميلة لواجهة المستخدم تم إنشاؤها باستخدام Tailwind CSS وNext.js.
إدخال كلمة المرور - إدخال كلمة المرور المخصصة shadcn/ui.
بوابات الدفع - يوضح هذا المستودع كيفية دمج بوابات الدفع الشائعة مثل Stripe وRazorpay وPayPal وCoinbase في تطبيق ويب باستخدام Next.js 14.
phone-input-shadcn-ui - مكون رقم هاتف مخصص تم إنشاؤه باستخدام shadcn/ui.
المخطط - يعد Planner مكون جدولة قابل للتكيف بدرجة كبيرة ومصمم خصيصًا لتطبيقات React.
لوحة - محرر نص منسق مدعوم بالذكاء الاصطناعي.
تسعير الصفحة-shadcn - صفحة تسعير تم إنشاؤها باستخدام shadcn/ui وNext.js 14. قابلة للتخصيص بالكامل.
زر التقدم - امتداد لمكون زر shadcn/ui الذي يستخدم جهاز الحالة لقيادة تجربة المستخدم الخاصة بالتقدم.
React-dnd-kit-tailwind-shadcn-ui - قم بسحب وإسقاط تنفيذ لوحة kanban التي يمكن الوصول إليها باستخدام React وdnd-kit وtailwind وshadcn/ui.
رد فعل-تسليط الضوء-بوبوفر - مكون رد فعل بدون رأس لإنشاء النوافذ المنبثقة عند تحديد النص بدون أي تبعيات.
رد فعل تحديد تنفيذ مكتبة رد فعل تحديد مع التصميم shadcn. دعم التحديد والاختيار غير المتزامن والتحديد المتعدد مع العديد من الخيارات القابلة للتكوين
recursive-dnd-kanban-board - يتم تنفيذ السحب والإفلات بشكل متكرر باستخدام لوحة kanban التي يمكن الوصول إليها باستخدام Next.js و@dnd-kit وtailwind وshadcn/ui.
عنوان البحث - يوفر مكون SearchAddress واجهة بحث مرنة وتفاعلية للعناوين، وذلك باستخدام خدمة Nominatim القوية من OpenStreetMap.
shadcn-address-autocomplete - مكون الإكمال التلقائي للعناوين تم إنشاؤه باستخدام واجهة برمجة تطبيقات أماكن Google ومكونات shadcn.
shadcn-admin - واجهة مستخدم لوحة تحكم المشرف المبنية باستخدام shadcn/ui وVite.
shadcn-blocks - Blocks هي مكونات shadcn/ui الرسمية المعدة مسبقًا ولكنها قابلة للتخصيص والتي يمكن نسخها ولصقها في مشاريعك.
shadcn-cal - نسخة من التقويم الشهري الذي يستخدمه Cal.com مع shadcn/ui وRadix Colors وReact Aria.
shadcn-calendar-heatmap - بديل حديث لخرائط الحرارة التفاعلية البدائية المبنية على مكون تقويم shadcn/ui.
shadcn-calendar-component - مكون منتقي تاريخ التقويم المصمم باستخدام shadcn/ui.
shadcn-chat - مكون دردشة قابل للتخصيص وإعادة الاستخدام لتستخدمه في مشاريعك.
shadcn-hsl-preview - امتداد معاينة shadcn HSL لرمز Visual Studio.
shadcn-ui - أضف مكونات من shadcn/ui مباشرة من VS Code.
shadcn/ui Components Manager - مكون إضافي لمنتجات Jetbrain. فهو يسمح لك بإدارة مكونات shadcn/ui عبر أطر عمل Svelte وReact وVue وSolid باستخدام هذا البرنامج الإضافي. تبسيط المهام مثل إضافة المكونات وإزالتها وتحديثها.
vscode-shadcn-svelte - ملحق VS Code لمكونات shadcn/ui في مشاريع Svelte.
vscode-shadcn-ui-snippets - يمكنك بسهولة استيراد مكونات shadcn-ui واستخدامها بسهولة باستخدام المقتطفات داخل VSCode. ما عليك سوى كتابة cn أو shadcn في ملف jsx/tsx وستحصل على قائمة بجميع المكونات التي يمكنك الاختيار من بينها.
vscode-shadcn-vue - امتداد لدمج مكونات shadcn/ui في مشاريع Vue.js.
الألوان والتخصيصات
10000+ سمات لـ shadcn/ui - 10000+ سمات لـ shadcn/ui.
بالدوار - قم بتشغيل مشروع Next أو Vite جديد باستخدام shadcn/ui. تخصيص الخط والأيقونات والألوان والتباعد ونصف القطر والظلال.
ewgenius/ui - قم بإنشاء سمات مخصصة لـ shadcn/ui دون عناء باستخدام لوحات نابضة بالحياة من Radix Colors.
navnote/rangeen - أداة تساعدك على إنشاء لوحة ألوان لموقعك على الويب
shadcn-ui-customizer - POC - سمات shadcn/ui مع منتقي الألوان
محرر سمات shadcn - محرر سمات Shadcn هو مكون سهل الاستخدام مصمم لتبسيط عملية إدارة وتخصيص ألوان السمات في المشروعات المستندة إلى Shadcn.
ui-colorgen - تطبيق مصمم لمساعدتك في تكوين ألوان shadcn/ui.
منشئ سمات shadcn/ui الخاص بـ Zippy Starter. - أنشئ سمات مخصصة بسهولة من لون واحد يمكنك نسخه ولصقه في تطبيقاتك.
الرسوم المتحركة
animata - رسوم متحركة وتأثيرات تفاعلية مصنوعة يدويًا ✍️ من جميع أنحاء الإنترنت؟ للنسخ واللصق في مشروعك.
Magicui.design - أكبر مجموعة من مكونات التفاعل مفتوحة المصدر لإنشاء صفحات مقصودة جميلة.
motionvariants - رسوم متحركة جميلة لحركة Framer.
tailwindcss-motion - مكتبة رسوم متحركة جديدة لبناء الجملة البسيطة. البطاريات متضمنة. شكلي بلا حدود.
أدوات
5devs - موقع ويب للحصول على بيانات برازيلية مزيفة لأغراض الاختبار.
bento-hub - BentoHub هو تطبيق يمكنك من خلاله إنشاء شبكة bento للملف التمهيدي لملف تعريف GitHub الخاص بك.
Cut-it - أداة تقصير الروابط التي تم تصميمها باستخدام Next.js App Router، وServer Actions، وDrizzle ORM، وTurso، وتم تصميمها باستخدام shadcn/ui.
Country-data-in-charts - Globe Graph هو تطبيق ويب يعرض بيانات الدول مثل الناتج المحلي الإجمالي، ونصيب الفرد من الناتج المحلي الإجمالي، والسكان في سنوات مختلفة باستخدام العديد من الرسوم البيانية.
down-dev-detector - يسرد هذا التطبيق جميع الخدمات المتوقفة حاليًا ويستخدم خدمة Atlassian Status Page وغيرها (قريبًا).
cv-forge - منشئ السيرة الذاتية، والإنشاء باستخدام @shadcn/ui، ونموذج خطاف التفاعل، وملف رد الفعل بتنسيق pdf
منشئ النماذج - أداة ترميز برمجي تعتمد على واجهة المستخدم لإنشاء نماذج @shadcn/ui الجميلة والآمنة بسهولة.
Hook-again - مجموعة من خطافات React القابلة للتثبيت shadcn/ui
imgsrc - قم بإنشاء صور رسم بياني مفتوح جميلة بدون أي جهد.
invoify - تطبيق لإنشاء الفواتير تم تصميمه باستخدام Next.js وTypescript وshadcn/ui
jobsync - JobSync هو مساعد الباحثين عن عمل لإدارة البحث عن وظيفة بكفاءة.
memfree - محرك بحث هجين مفتوح المصدر يعمل بالذكاء الاصطناعي، احصل على الفور على إجابات دقيقة من الإنترنت والإشارات المرجعية والملاحظات والمستندات. دعم النشر بنقرة واحدة. تم إنشاؤه باستخدام Next.js وTypescript وshadcn/ui.
Metro-sp - احصل على تحديثات تلقائية في الوقت الفعلي بشأن الأحداث والتغييرات على خطوط SP Metro وViaMobilidade وCPTM كل 5 دقائق.
myinstants - أكبر موقع لأزرار الصوت الفورية في البرازيل!
opensearch-ai - استنساخ SearchGPT / Perplexity، ولكنه مخصص لك.
postgres- صندوق حماية Postgres الموجود في المتصفح بمساعدة الذكاء الاصطناعي
proxmox-helper-scripts - كتالوج من البرامج النصية لمختبرك المنزلي Proxmox VE، تم تصميمه باستخدام Next.js App Router وتم تصميمه باستخدام shadcn/ui.
quack-db - محرر DuckDB SQL مفتوح المصدر في المتصفح
qualmeuip - اكتشف عنوان IP الخاص بك واختبر سرعة الإنترنت لديك
shadcn-form-builder - قم بإنشاء نماذج باستخدام Shadcn وreact-hooks-form وzod في غضون دقائق
shadcn-pricing-page-generator - أسهل طريقة للحصول على صفحة تسعير React باستخدام shadcn/ui و/أو Radix UI و/أو Tailwind CSS.
shadcn-theme-editor - Shadcn Theme Editor هو مكون سهل الاستخدام مصمم لتبسيط عملية إدارة وتخصيص ألوان السمات في المشروعات المستندة إلى Shadcn
shadcn-zod-form - أداة CLI لإنشاء نماذج shadcn/ui من مخططات zod.
sharable-form-builder - أداة إنشاء نماذج قابلة للمشاركة لإنشاء النماذج ومشاركة رابط النموذج الخاص بك، استنادًا إلى shadcn/ui وNext.js.
tinte - منشئ سمات VS Code المعترض؟
تطبيق ترجمة - ترجمة التطبيق باستخدام TypeScript وTailwind CSS وNextJS وBun وshadcn/ui وAI-SDK/OpenAI وZod
typelabs - تطبيق اختبار الكتابة المستوحى من MonkeyType والذي تم تصميمه باستخدام React وshadcn وZustand في جوهره.
ui-builder - محرر مكونات React الذي يوفر طريقة مرئية بدون تعليمات برمجية لإنشاء واجهات مستخدم، ومتوافق تمامًا مع shadcn/ui والمكونات المخصصة.
ui-fonts - اختبار الخطوط ومعاينتها في الوقت الفعلي لتلبية جميع احتياجات التصميم الخاصة بك. اختر الخط المثالي بسهولة.
الإصدار 0 - يتيح نظام واجهة المستخدم التوليدي من Vercel، المبني على shadcn/ui وTailwindCSS، إنشاء واجهة مستخدم سهلة من المطالبات النصية و/أو الصور. إنه ينتج كود React وHTML، والتكامل ممكن أيضًا عبر أمر v0 CLI.
wallhaven-desktop - برنامج Wallhaven Wallpaper لسطح المكتب. قم بإنشاء عميل يستند إلى wallhaven api، وهو برنامج ورق حائط حقيقي. استخدم Farm و Tauri و React19 و shadcn/ui.
xuneix - أداة لتدوير الارتباط لتعزيز أمان لوحة الإدارة. يتضمن عناوين URL الديناميكية، والرموز المميزة لانتهاء الصلاحية، والتناوب القابل للتخصيص. الإعداد بسهولة مع shadcn/ui. يتكامل مع Vercel KV.
إلهام المواقع والمحافظ
المواقع الإلكترونية
godly - إلهام تصميم الويب الجيد الفلكي. فقط الأفضل من الأفضل.
list.swajp.me - لم يكن العثور على المشاريع أو التصميمات المناسبة من خلال إلهام الأشخاص الناجحين أسهل من أي وقت مضى.
المحافظ
andrewsam.xyz - نسخة متجددة من مدونة tailwind-nextjs-starter الشهيرة باستخدام shadcn/ui، بالإضافة إلى قسم السيرة الذاتية ومكون المخطط الزمني للتجربة.
anonypost - شارك أفكارك وتجاربك دون الكشف عن هويتك عن طريق النشر على المنصة. تم تصميمه باستخدام t3-stack
بولهاديف - أسرع طريق لتعلم اللغة الإنجليزية هو التحدث بها بانتظام. فقط ابحث عن شخص للدردشة معه.
crept-studio - Crept هو مشروع مجاني مفتوح المصدر، تم إنشاؤه باستخدام Next.js وTailwind CSS وShadcn UI. يمكنك استخدامه لتقديم البرامج التلفزيونية والأفلام المجانية.
Enjoytown - منصة بث مجانية للرسوم المتحركة والمانجا والأفلام والبرامج التلفزيونية. بنيت مع Nextjs، shadcn/ui
حاسبة الدرجات - آلة حاسبة للدرجات/لوحة معلومات للطلاب، تهدف إلى تقديم نظرة عامة أفضل على الأداء الأكاديمي.
infinitunes - تطبيق ويب بسيط لمشغل الموسيقى تم تصميمه باستخدام Next.js وshadcn/ui وTailwind CSS وDrizzleORM والمزيد...
kd - تطبيق بث الدراما الكورية بدون إعلانات. تم تصميمه باستخدام Nextjs وDrizzle ORM وNeonDB وshadcn/ui
memergez - يمكنك إنشاء الميمات بسرعة عن طريق إدخال نص أو عنوان URL للصورة الرمزية، مع دعم العديد من أوامر الميمات.
Plotwist - إدارة ومراجعة سهلة للأفلام والمسلسلات والرسوم المتحركة باستخدام Next.js وTailwind CSS وSupabase وshadcn/ui.
الموانئ
Angular - المنفذ الزاوي لـ shadcn/ui
الرفرفة - منفذ الرفرفة لـ shadcn/ui
Franken UI - مكونات HTML الأولى، المحايدة لإطار العمل، والمصممة بشكل جميل والتي يمكنك نسخها ولصقها في موقعك. يمكن الوصول إليها. قابلة للتخصيص. مفتوح المصدر.
JollyUI - مكونات الأغنية التفاعلية المتوافقة مع shadcn/ui
كوتلين - ميناء كوتلين shadcn/ui
Phoenix Liveview - منفذ Phoenix Liveview لـ shadcn/ui
React Native - منفذ React الأصلي لـ shadcn/ui
React Native - منفذ React الأصلي لـ shadcn/ui (مستحسن)
روبي - منفذ روبي لـ shadcn/ui
صلب - منفذ صلب لـ shadcn/ui
Svelte - منفذ Svelte لـ shadcn/ui
سويفت - منفذ سويفت لـ shadcn/ui
Sysinfocus simple/ui - مكتبة مكونات Razor لـ Blazor، مستوحاة من shadcn/ui
Vue - منفذ Vue لـ shadcn/ui
نظام التصميم
shadcn-ui-components - كل مكون تم إعادة إنشائه في Figma.
shadcn-ui-storybook - جميع مكونات shadcn/ui المسجلة في القصص القصيرة بواسطة JheanAntunes
shadcn-ui-storybook - جميع مكونات shadcn/ui المسجلة في القصص القصيرة بواسطة felipeutaka
قوالب / قوالب
browser-extension-starter-plasmo-shadcn-trpc - مجموعة بداية ملحق المتصفح التي تتميز بـ Plasmo وReact وShadcn وtRPC.
chadnext - يتضمن قالب البدء السريع جهاز توجيه التطبيقات Next.js 14 وshadcn/ui وLuciaAuth وPrisma وServer Actions وStripe وInternationalization والمزيد.
cloudflare-saas-stack - مجموعة أدوات بداية مضمنة بالبطاريات لبناء منتجات SaaS ونشرها بسرعة على Cloudflare.
create-tauri-core - قالب مشروع لإنشاء تطبيق Tauri باستخدام Vite وReact وTailwind CSS.
قالب نظام التصميم - Turborepo + TailwindCSS + Storybook + shadcn/ui
easy-ui - أكثر من 50 قالبًا لمواقع الويب مفتوحة المصدر عالية الجودة تم إنشاؤها باستخدام NextJS + shadcn/ui + Tailwind CSS + Framer Motion والمزيد.
Electron-shadcn - قالب تطبيق Electron مع shadcn/ui ومجموعة من libs والأدوات الأخرى الجاهزة للاستخدام.
shadcn-next-workflows - منشئ سير العمل التفاعلي باستخدام React Flows وNext.js وShadcnui. قم بإنشاء العقد المخصصة وتوصيلها والتحقق من صحتها بسهولة.
Supa-next-shad-auth - إجراءات خادم سريعة الاستجابة وآمنة تمامًا للكتابة وواجهة مستخدم سهلة الاستخدام وقابلة للتخصيص مع اتباع أفضل الممارسات. التقنية المستخدمة: NextJS + Supabase + TypeScript + Server Actions + Zod + shadcn/ui.
t3-app-template - هذا هو قالب الإدارة لـ T3 Stack وshadcn/ui
التصنيف - تطبيق مفتوح المصدر تم إنشاؤه باستخدام جهاز التوجيه الجديد ومكونات الخادم وكل ما هو جديد في Next.js
template-next - قالب Next.js نظيف يحتوي على TypeScript وTailwindCSS وShadcn/ui وPrettier.
Turborepo-shadcn-ui-tailwindcss - مشغل Turborepo مع shadcn/ui وTailwind CSS تم تكوينهما مسبقًا لمكونات واجهة المستخدم المشتركة.
Turborepo-launchpad - نموذج أحادي شامل لمشاريع shadcn باستخدام Turbo. ويتميز بإعداد قابل للتطوير بشكل كبير ومثالي لتطوير التطبيقات المعقدة ذات المكونات والأدوات المساعدة المشتركة.
wordpress-plugin-boilerplate - مكون WordPress الإضافي Boilerplate باستخدام تقنيات وأدوات الويب الحديثة مثل React وTypeScript وSASS وTailwind CSS وShadcn UI وVite وGrunt.js وStorybook وHMR والمزيد.
