نيوبروتاليستيمكونات React UI
مكوّنات React سهلة الوصول بأسلوب نيوبروتاليست — حدود سميكة، وظلال حادة، وألوان صاخبة. كل مكوّن يأتي بنسختَي Radix UI و Base UI و React Aria، ويُثبَّت عبر واجهة shadcn CLI، ويصلك كوداً تملكه.
- 50+ المكونات
- حدود سميكة، ظلال حادة
- shadcn CLI تثبيت
- Radix · Base UI · React Aria
- Radix · Base UI · React Aria
- متاح بشكل افتراضي
- الرمز ملكك
- MCP دعم الخادم
- الوضع المظلم وRTL
- العلامات الصغيرة الصاخبة
كل المكوّنات
Sonner
إشعارات متراكبة على شكل شرائح خبز محمص لتأكيدات الحفظ وعمليات التحميل ونوافذ التراجع — مع أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.
أكورديون
مجموعة من الأقسام القابلة للتوسيع، مرتبة عموديًا، مخصصة للأسئلة الشائعة والإعدادات والصفحات الغنية بالمحتوى — مع تطبيق أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.
أمر
لوحة أوامر يتم التحكم فيها عبر لوحة المفاتيح لقوائم ⌘K، والبحث الشامل، والإجراءات السريعة — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
إدخال
حقل نصي من سطر واحد مخصص لعمليات تسجيل الدخول وأشرطة البحث ونماذج إتمام الدفع — مع تطبيق أسلوب «النيوبروتاليزم» الذي يتميز بالحدود السميكة والظلال الحادة.
إدخال OTP
إدخال الرمز لمرة واحدة لأغراض المصادقة الثنائية (2FA) والتحقق من تسجيل الدخول وشاشات رقم التعريف الشخصي (PIN) — حقول تدعم اللصق ذات حدود على الطراز «النيوبروتالستي» وظلال حادة.
الاتجاه
مزود سياق يقوم بتبديل اتجاه عرض المكونات بين «من اليسار إلى اليمين» و«RTL» (من اليمين إلى اليسار)، بحيث تُعرض القوائم وأشرطة التمرير وعلامات التبويب بشكل صحيح باللغات العربية والعبرية والفارسية.
التقدم
شريط رفيع يتملأ مع اكتمال كل مهمة — عمليات التحميل، والتثبيت، وعمليات الإعداد متعددة الخطوات — مع تطبيق أسلوب «النيوبروتاليزم» في تصميم الحدود والظلال.
بطاقة
مربع محاط بإطار مخصص للوحات المعلومات ومستويات الأسعار وشبكات المنتجات — يتألف من رأس الصفحة والمحتوى وتذييل الصفحة مع تطبيق تأثير الظل الحاد على غرار أسلوب «النيوبروتاليست».
بطاقة عند التمرير
معاينة عائمة تظهر عند تمرير المؤشر فوقها — لمحات عن الملف الشخصي، ومعاينات الروابط، ومصطلحات المسرد — مع تطبيق أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.
تبديل
زر تشغيل/إيقاف ثنائي الحالة للتحكم في تنسيق شريط الأدوات وكتم الصوت والتثبيت — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
ترقيم الصفحات
روابط صفحات مرقمة مزودة بأزرار «السابق» و«التالي» لنتائج البحث والجداول والأرشيفات — بأسلوب «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
تسمية
تسمية توضيحية لحقول الإدخال، ومربعات الاختيار، ومفاتيح التبديل، ومجموعات أزرار الاختيار — حيث تؤدي النقرات إلى تنشيط عنصر التحكم، مكتوبة بخط العناوين «نيوبروتاليست».
تقويم
أداة اختيار التواريخ بنظام الشبكة الشهرية للحجوزات، وتحديد المواعيد، واختيار النطاقات — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
تلميح
تلميحات عند تمرير المؤشر والتركيز على أزرار الرموز، واختصارات لوحة المفاتيح، والتسميات المختصرة — مع تطبيق أسلوب «النيوبروتاليست» في الحدود والظلال.
تنبيه
شرح مدمج لعرض أخطاء النماذج والتحذيرات وتأكيدات النجاح — لوحات بألوان تعبر عن الحالة، مع حدود على الطراز «النيوبروتاليستي» وظلال حادة.
جدول
جدول HTML دلالي للفواتير وقوائم الإدارة وجداول الأسعار — صفوف محددة بحدود، وعناوين بخط عريض، وظل قوي على الطراز النيوبروتالي.
جدول بيانات
جداول قابلة للفرز والتصفية وتقسيمها إلى صفحات، مخصصة للوحات التحكم الإدارية ولوحات المعلومات وقوائم الطلبات — مع تطبيق أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.
حقل
مساحات التسميات وعناصر التحكم ونصوص المساعدة ورسائل الخطأ الخاصة بلوحات الإعدادات ونماذج الدفع وعمليات التسجيل — مع تصميم النماذج بأسلوب «النيوبروتاليستي».
درج
صفحة تعمل بالإيماءات تنزلق من أي حافة لعرض القوائم المتنقلة، والمرشحات، والنماذج السريعة — مع حدود وظلال على الطراز «النيوبروتاليستي».
زر
زر قابل للنقر لإرسال النماذج، وأشرطة الأدوات، وتأكيدات الإلغاء — مع حدود سميكة وظل يظهر عند النقر عليه.
شارة
تسمية توضيحية صغيرة للحالات والأعداد والعلامات على البطاقات والجداول وعناصر التنقل — مع تطبيق أسلوب «النيوبروتاليست» في الحواف والظلال.
شريط القوائم
شريط أفقي يحتوي على قوائم منسدلة مخصصة لأشرطة الأدوات والمحررات ولوحات التحكم المصممة على غرار التطبيقات — مع تطبيق أسلوب «النيوبروتاليزم» في الحواف والظلال.
شريط تمرير
حقل إدخال قابل للسحب لاختيار قيمة أو نطاق — مثل مستوى الصوت، أو عوامل تصفية الأسعار، أو الإعدادات — مع تطبيق أسلوب «النيوبروتاليست» في تصميم الحدود والظلال.
شريط جانبي
لوحة تنقل قابلة للطي على غرار «أب-شيل» مخصصة للوحات التحكم والمستندات وأدوات الإدارة — مع تصميم «نيوبروتالستي» الذي يتميز بالحدود والظلال.
صورة رمزية
صورة مستخدم مع خيار بديل بالأحرف الأولى في قوائم الملفات الشخصية وسلسلة التعليقات وقوائم الفرق — مع تطبيق أسلوب «النيوبروتاليزم» الذي يتميز بالحدود السميكة.
طباعة
وصفات من الفئة العملية للعناوين والنصوص الرئيسية والقوائم والجداول والرموز المضمنة — مصممة بنمط «نيوبروتالستي» ذي المظهر الثقيل.
عرض دوّار
عرض شرائح قابل للتمرير لمعارض المنتجات والشهادات والأقسام البارزة — مع إطارات على الطراز «النيوبروتالستي» وظلال حادة.
علامات تبويب
يمكنك التبديل بين لوحات المحتوى المتراكبة — صفحات الإعدادات، ولوحات المعلومات، ومعاينات الأكواد — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
عنصر
صف مرن يحتوي على خانات للوسائط والعنوان والوصف والإجراء، مخصص لموجزات الإشعارات وقوائم الإعدادات وصفوف الملفات — بتصميم على الطراز «النيوبروتاليستي».
فارغ
عنصر بديل لعمليات البحث التي لا تسفر عن نتائج، ولوحات التحكم الفارغة، وشاشات التشغيل الأول — حيث يتم تأطير الرمز والعنوان والإجراء بحدود على الطراز «النيوبروتاليستي».
فاصل
خط أفقي أو عمودي يفصل بين القوائم وأشرطة الأدوات والقوائم — مرسوم بنفس لون الحدود الصلبة المستخدم في الإطارات ذات الطراز «النيوبروتاليستي».
قائمة أصلية
تم إعادة تصميم عنصر الاختيار الأصلي في HTML ليلائم النماذج وعوامل التصفية وأدوات اختيار البلدان — قائمة منسدلة يتم عرضها بواسطة نظام التشغيل مع حدود وظلال على الطراز «النيوبروتاليستي».
قائمة اختيار
قائمة منسدلة لاختيار خيار واحد — حقول البلد، ترتيب الفرز، إعدادات السمة — ذات حدود سميكة على الطراز «النيوبروتاليستي» وظلال حادة.
قائمة تنقل
شريط أفقي يضم روابط وألواح منسدلة لعناوين المواقع، وأدوات التنقل في المستندات، وقوالب التطبيقات — مع حدود على الطراز «النيوبروتاليستي» وظلال حادة.
قائمة سياقية
قائمة تظهر عند النقر بزر الماوس الأيمن على صفوف الملفات، واللوحات، وشبكات البيانات — إجراءات سياقية بتصميم «نيوبروتاليستي» يتميز بالحدود والظلال.
قائمة منسدلة
قائمة يتم تشغيلها بضغطة زر لإجراءات الصفوف، وأدوات التبديل بين الحسابات، وخيارات العرض — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
قابل لتغيير الحجم
أجزاء قابلة للسحب لمحررات الأكواد، وأشجار الملفات، وتصميمات لوحات التحكم — مع لمسة «النيوبروتاليزم» في الحواف والظلال.
قابل للطي
زوج من عناصر التحكم واللوحات المخصصة لأشجار الملفات والإعدادات المتقدمة وأقسام «عرض المزيد» — مع تصميم «النيوبروتالستي» الذي يتميز بالحدود والظلال.
لوحة جانبية
لوحة تنزلق من حافة الشاشة لعرض أدراج التنقل، والمرشحات، ونماذج التحرير — مع تطبيق أسلوب «النيوبروتاليستي» في تصميم الحدود والظلال.
مؤشر تحميل
مؤشر تحميل متحرك لعمليات الإرسال المعلقة وعمليات الاسترداد وحالات الانشغال المضمنة — أيقونة جاهزة للاستخدام مع أي عنصر تحكم من طراز «نيوبروتالست».
مجموعة أزرار
تدمج «Fuses» الأزرار المنفصلة وأشرطة الأدوات وملحقات الإدخال في وحدة واحدة محاطة بإطار — حدود سميكة واحدة، وظل بارز واحد، وزر ضغط مشترك واحد.
مجموعة أزرار اختيار
مجموعة من أزرار الاختيار أحادية الخيار الخاصة بنماذج الخطط وخيارات الشحن والإعدادات — مع تطبيق أسلوب «النيوبروتاليستي» في تصميم الحدود والظلال.
مجموعة إدخال
أضف الرموز والأزرار وتلميحات لوحة المفاتيح إلى حقول الإدخال الخاصة بأشرطة البحث وحقول عناوين URL وأدوات كتابة الرسائل في الدردشة — مع حدود وظلال على الطراز «النيوبروتاليستي».
مجموعة تبديل
مجموعات أزرار ذات حالتين لشريط أدوات المحرر، ومبدلات العرض، وأشرطة التصفية — مع تطبيق أسلوب «النيوبروتاليست» في الحدود والظلال.
مربع اختيار
مفتاح تبديل ثنائي لمربعات الموافقة، وفلاتر الاختيار المتعدد، واختيار الصفوف بشكل جماعي — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
مربع تحرير وسرد
حقل إدخال مزود بخاصية الإكمال التلقائي يقوم بتصفية الخيارات أثناء الكتابة — مثل قوائم اختيار البلدان، وحقول إدخال العلامات، وقوائم الاختيار الطويلة — مع حدود وظلال بتصميم «نيوبروتاليستي».
مربع حوار
نافذة منبثقة مخصصة لعمليات التأكيد، والنماذج السريعة، ومطالبات الإجراءات التي تؤدي إلى فقدان البيانات — تظهر فوق الصفحة بحدود سميكة وظل بارز.
مربع حوار تنبيه
نافذة منبثقة توقف سير العملية عند القيام بأعمال مدمرة — مثل الحذف، أو تسجيل الخروج، أو التخلص من المحتوى — مع تصميم يعتمد على أسلوب «النيوبروتاليزم» الذي يركز على الحدود والظلال.
مسار التنقل
يُظهر المكان الذي تحتله الصفحة في التسلسل الهرمي للموقع — مسارات الروابط الخاصة بالوثائق وفئات المتجر ولوحات المعلومات — بخط نيوبروتالستي عريض.
مفتاح
أغطية مفاتيح لوحة المفاتيح لعرض تلميحات الاختصارات في القوائم، ونصائح الأدوات، ولوحات الأوامر — عنصر kbd أصلي يتميز بحواف وظلال على الطراز «النيوبروتاليستي».
مفتاح تبديل
مفتاح تشغيل/إيقاف للإعدادات الفورية — الإشعارات، والوضع المظلم، وعلامات الميزات — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
مُنتقي التاريخ
تقويم منبثق لاختيار تواريخ فردية، ونطاقات زمنية، وأعياد ميلاد في النماذج وفلاتر البحث — مع حدود على الطراز «النيوبروتاليستي» وظلال حادة.
منطقة تمرير
حاوية قابلة للتمرير مزودة بأشرطة تمرير مخصصة ومتوافقة مع جميع المتصفحات، مخصصة لأجزاء الدردشة والأشرطة الجانبية وشجرات الملفات — مع مؤشر تمرير سميك على الطراز «النيوبروتالستي».
منطقة نص
حقل إدخال نص متعدد الأسطر مخصص للتعليقات والسير الذاتية ورسائل الدعم — مع تصميم «نيوبروتاليستي» يتميز بالحدود والظلال.
نافذة منبثقة
لوحة عائمة مرتبطة بآلية تشغيل لأدوات اختيار التاريخ، والمرشحات، والنماذج المضمنة — مع تصميم «النيوبروتاليستي» الذي يتميز بالحدود والظلال.
نسبة العرض إلى الارتفاع
يضبط الصور ومقاطع الفيديو المدمجة والخرائط على نسبة ثابتة عند تغيير حجمها — أداة التخطيط التي تحافظ على بقاء البطاقات ذات الطراز «النيوبروتالي» ضمن الشبكة.
هيكل تحميل
كتلة مؤقتة تومض للبطاقات والصور الرمزية والجداول أثناء تحميل البيانات — مع تطبيق أسلوب «النيوبروتاليزم» الذي يتميز بالحدود السميكة.