پرش به محتوا

نئوبروتالیستکامپوننت‌های React UI

کامپوننت‌های دسترس‌پذیر React با سبک نئوبروتالیستی — حاشیه‌های ضخیم، سایه‌های تند، رنگ‌های پرسروصدا. هرکدام در نسخهٔ Radix UI و Base UI و React Aria هست، با shadcn CLI نصب می‌شود و به‌صورت کدی که مالِ شماست تحویل می‌شود.

پیش‌نمایش زنده

دکمه

01/07

در سایهٔ سخت خودش فرو می‌رود.

Docs
npx shadcn add neobrutalism.com/r/base/button.json
57 اجزا
  • 50+ اجزا
  • مرزهای ضخیم، سایه‌های سخت
  • shadcn CLI نصب
  • Radix · Base UI · React Aria
  • Radix · Base UI · React Aria
  • به‌طور پیش‌فرض قابل دسترسی
  • کد مال توست
  • MCP پشتیبانی سرور
  • حالت تاریک و RTL
  • برچسب‌های کوچک پرصدا

همهٔ کامپوننت‌ها

Sonner

اخطارهای تودرتوی toast برای تأیید ذخیره‌سازی، بارگذاری‌ها و پنجره‌های لغو — با جلوه‌های نئوبروتالیستی مرزها و سایه‌ها.

آکاردئون

مجموعه‌ای از بخش‌های قابل گسترش که به‌صورت عمودی روی هم قرار گرفته‌اند برای صفحات پرسش‌های متداول، تنظیمات و صفحات پربار محتوا — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

آواتار

تصویر کاربری با امکان استفاده از حروف اول نام به‌عنوان جایگزین برای منوهای پروفایل، رشته‌های نظرات و فهرست‌های تیم — با جلوه‌ی neobrutalist و حاشیه‌ی ضخیم.

آیتم

یک ردیف انعطاف‌پذیر با اسلات‌های رسانه، عنوان، توضیحات و اقدام برای فیدهای اعلان، فهرست‌های تنظیمات و ردیف‌های فایل — به سبک نئوبروتالیست.

اسپینر

یک نشانگر بارگذاری متحرک برای ارسال‌ها و دریافت‌های در حال انجام و حالت‌های شلوغ درون‌خطی — یک آیکون جایگزین برای هر کنترل نئوبروتالیست.

اسکلتون

یک بلوک نگهدارندهٔ پالسی برای کارت‌ها، آواتارها و جداول در حین بارگذاری داده‌ها — با جلوه‌ی حاشیه‌کلفتِ نئوبروتالیست.

انتخاب

یک منوی کشویی برای انتخاب یک گزینه — فیلدهای کشور، ترتیب‌های مرتب‌سازی، تنظیمات تم — با حاشیه‌های ضخیم نئوبروتالیست و سایه‌های تند.

انتخاب بومی

انتخابگر بومی HTML که برای فرم‌ها، فیلترها و انتخابگرهای کشور بازطراحی شده است — منوی کشویی رندر شده توسط سیستم‌عامل با مرزها و سایه‌های نئوبروتالیست.

انتخابگر تاریخ

یک تقویم پاپ‌آپ برای انتخاب تک‌تاریخ‌ها، بازه‌های زمانی و تاریخ‌های تولد در فرم‌ها و فیلترها — با حاشیه‌های نئوبروتالیست و سایه‌های تند.

برچسب

یک توضیح برای ورودی‌ها، چک‌باکس‌ها، سوئیچ‌ها و گروه‌های رادیویی — کلیک‌ها کنترل را فعال می‌کنند، با فونت سربرگ نئوبروتالیست.

پاپ‌اور

یک پنل شناور متصل به ماشه‌ای برای انتخابگرهای تاریخ، فیلترها و فرم‌های درون‌خطی — با جلوه‌ی نئوبروتالیستی حاشیه‌ها و سایه‌ها.

پیشرفت

یک نوار باریک که با اتمام هر وظیفه پر می‌شود — بارگذاری‌ها، نصب‌ها، فرایند چندمرحله‌ای ورود — با جلوه‌های نئوبروتالیستی مرزها و سایه‌ها.

تایپوگرافی

دستورالعمل‌های کلاس Utility برای سربرگ‌ها، متن اصلی، فهرست‌ها، جداول و کد درون‌خطی — صفحه‌آرایی‌شده با ظاهر سنگین نئوبروتالیست.

تغییر وضعیت

یک دکمهٔ دوحالته‌ی روشن/خاموش برای قالب‌بندی نوار ابزار، بی‌صدا کردن و پین کردن کنترل‌ها — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

تقویم

یک انتخابگر تاریخ در قالب جدول ماهانه برای رزرو، زمان‌بندی و انتخاب بازه — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

جداکننده

یک خط افقی یا عمودی که منوها، نوار ابزارها و فهرست‌ها را تقسیم می‌کند — با رنگ حاشیهٔ یک‌رنگ و محکمی که مانند قاب‌های نئوبروتالیست است.

جدول

جدول HTML معنایی برای فاکتورها، فهرست‌های مدیریتی و جدول‌های قیمت‌گذاری — سطرهای حاشیه‌دار، سربرگ‌های پررنگ و سایهٔ سخت نئوبروتالیست.

جدول داده

جدول‌های قابل مرتب‌سازی، قابل فیلترسازی و صفحه‌بندی‌شده برای پنل‌های مدیریت، داشبوردها و فهرست سفارش‌ها — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

جعبه ترکیبی

یک فیلد ورودی تکمیل خودکار که گزینه‌ها را هنگام تایپ فیلتر می‌کند — انتخابگرهای کشور، فیلدهای برچسب، انتخاب‌های طولانی — با حاشیه‌ها و سایه‌های نئوبروتالیست.

جمع‌شونده

یک جفت ماشه و پنل برای درختان فایل، تنظیمات پیشرفته و بخش‌های «نمایش بیشتر» — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

جهت

یک ارائه‌دهندهٔ زمینه که اجزا را بین راست‌به‌چپ و چپ‌به‌راست جابه‌جا می‌کند تا منوها، اسلایدرها و تب‌ها در زبان‌های عربی، عبری و فارسی به‌درستی آینه‌وار نمایش داده شوند.

چک‌باکس

یک کلید دودویی برای کادرهای رضایت، فیلترهای چندگزینه‌ای و انتخاب دسته‌ای ردیف‌ها — با طراحی نئوبروتالیست مبتنی بر مرزها و سایه‌ها.

خالی

یک نگه‌دارندهٔ جای خالی برای جستجوهای بدون نتیجه، داشبوردهای خالی و صفحه‌های راه‌اندازی اولیه — آیکون، عنوان و اقدام در قاب‌های نئوبروتالیست.

دکمه

یک ماشه قابل کلیک برای ارسال فرم‌ها، نوار ابزارها و تأییدهای مخرب — با حاشیه‌های ضخیم و سایه‌ای که هنگام کلیک روی آن فرو می‌رود.

راهنمای ابزار

نکات شناور و فوکوس برای دکمه‌های آیکونی، میانبرهای صفحه‌کلید و برچسب‌های کوتاه‌شده — با جلوه‌ی نئوبروتالیستی حاشیه و سایه.

زبانه‌ها

بین پنل‌های محتوای لایه‌لایه — صفحات تنظیمات، داشبوردها و پیش‌نمایش کد — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها جابجا شوید.

سوییچ

یک کلید روشن/خاموش برای تنظیمات فوری — اعلان‌ها، حالت تاریک، پرچم‌های ویژگی — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

شیت

پنلی که از لبهٔ صفحه برای کشوهای ناوبری، فیلترها و فرم‌های ویرایش کشیده می‌شود — با جلوه‌ی نئوبروتالیستی حاشیه‌ها و سایه‌ها.

صفحه‌بندی

پیوندهای صفحات شماره‌گذاری‌شده با کنترل‌های قبلی/بعدی برای نتایج جستجو، جداول و آرشیوها — به سبک نئوبروتالیست مرزها و سایه‌ها.

فرمان

یک پالت فرمان مبتنی بر صفحه‌کلید برای منوهای ⌘K، جستجوی سراسری و اقدامات سریع — با طراحی نئوبروتالیستِ حاشیه‌و-سایه.

فیلد

برچسب‌ها، کنترل‌ها، متن‌های راهنما و اسلات‌های خطا برای پنل‌های تنظیمات، فرم‌های تسویه‌حساب و جریان‌های ثبت‌نام — با رویکرد فرم نئوبروتالیست.

قابل تغییر اندازه

پنل‌های قابل‌کشیدن برای ویرایشگرهای کد، درخت‌های فایل و چیدمان‌های داشبورد — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

کارت

یک کادر حاشیه‌دار برای داشبوردها، سطوح قیمت‌گذاری و شبکه‌های محصول — سربرگ، محتوا و پاورقی با جلوه‌ی سایهٔ سخت نئوبروتالیست.

کارت شناور

پیش‌نمایش شناور که با hover باز می‌شود — نگاهی به پروفایل، پیش‌نمایش لینک‌ها، اصطلاحات واژه‌نامه — با جلوه‌ی neobrutalist مرزها و سایه‌ها.

کاروسل

اسلایدشو قابل کشیدن برای گالری‌های محصول، نظرات مشتریان و بخش‌های قهرمان — با حاشیه‌های نئوبروتالیست و سایه‌های تند.

کشو

یک صفحهٔ مبتنی بر ژست که از هر لبه‌ای به داخل می‌لغزد برای منوهای موبایل، فیلترها و فرم‌های سریع — با حاشیه‌ها و سایه‌های نئوبروتالیست.

کلید

درپوش‌های کلید صفحه‌کلید برای نمایش راهنمایی‌های میانبر در منوها، ابزارنویسه‌ها و پالت‌های فرمان — یک عنصر بومی kbd با حاشیه‌ها و سایه‌های نئوبروتالیست.

گروه تغییر وضعیت

گروه‌های دکمه‌ای دوحالت برای نوار ابزار ویرایشگر، جابه‌زن‌های نما و نوارهای فیلتر — با جلوه‌ی نئوبروتالیستی حاشیه‌ها و سایه‌ها.

گروه دکمه

فوزها دکمه‌های شکافته، نوار ابزارها و افزونه‌های ورودی را در یک واحد قاب‌دار ادغام می‌کنند — یک حاشیهٔ ضخیم، یک سایهٔ سخت، یک فشار مشترک.

گروه رادیویی

مجموعه‌ای از دکمه‌های رادیویی تک‌گزینه‌ای برای طرح‌ها، گزینه‌های ارسال و فرم‌های تنظیمات — با جلوه‌ی نئوبروتالیستی حاشیه‌ها و سایه‌ها.

گروه ورودی

آیکون‌ها، دکمه‌ها و راهنمایی‌های صفحه‌کلید را به ورودی‌های نوار جستجو، فیلدهای URL و ویرایشگرهای چت متصل کنید — با حاشیه‌ها و سایه‌های نئوبروتالیست.

گفتگو

یک پنجرهٔ مدال برای تأییدها، فرم‌های سریع و هشدارهای اقدام مخرب — که روی صفحه با حاشیه‌های ضخیم و سایه‌ای تیره قرار گرفته است.

گفتگوی هشدار

یک پنجرهٔ مدال که جریان را برای اقدامات مخرب — حذف، خروج، دور انداختن — متوقف می‌کند، با جلوه‌ی نئوبروتالیستِ مرزها و سایه‌ها.

لغزنده

یک ورودی قابل کشیدن برای انتخاب یک مقدار یا محدوده — حجم، فیلترهای قیمت، تنظیمات — با جلوه‌ی نئوبروتالیستی لبه‌ها و سایه‌ها.

مسیر راهنما

نشان می‌دهد که صفحه در سلسله‌مراتب سایت کجا قرار دارد — مسیرهای پیوند برای اسناد، دسته‌بندی‌های فروشگاه و داشبوردها — با قلم نیوبروتالیست پررنگ.

منوی زمینه‌ای

منوی کلیک-راست برای سطرهای فایل، بوم‌ها و شبکه‌های داده — عملیات‌های متنی با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

منوی کشویی

منویی که با فشردن دکمه باز می‌شود برای عملیات سطر، جابه‌جایی حساب‌ها و گزینه‌های نمایش — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

منوی ناوبری

یک نوار افقی از پیوندها و پنل‌های کشویی برای سربرگ‌های سایت، ناوبری اسناد و پوسته‌های برنامه — با حاشیه‌های نئوبروتالیست و سایه‌های تند.

ناحیه پیمایش

یک کانتینر قابل پیمایش با نوارهای پیمایش سفارشی و سازگار با همه مرورگرها برای پنجره‌های چت، نوارهای کناری و درخت‌های فایل — با یک انگشت شست حجیم نئوبروتالیست.

ناحیه متن

یک ورودی متن چندخطی برای نظرات، بیوگرافی‌ها و پیام‌های پشتیبانی — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

نسبت تصویر

تصاویر، ویدئوهای جاسازی‌شده و نقشه‌ها را هنگام تغییر اندازه به نسبت ثابتی محدود می‌کند — ابزار چیدمان که کارت‌های نئوبروتالیست را روی شبکه نگه می‌دارد.

نشان

یک برچسب کوچک برای وضعیت‌ها، شمارش‌ها و برچسب‌ها روی کارت‌ها، جداول و آیتم‌های ناوبری — با جلوه‌ی نئوبروتالیستی حاشیه‌ها و سایه‌ها.

نوار کناری

یک پنل ناوبری قاب-برنامه‌ای تاشو برای داشبوردها، اسناد و ابزارهای مدیریتی — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

نوار منو

یک نوار افقی از منوهای کشویی برای نوار ابزارهای سبک اپلیکیشن، ویرایشگرها و داشبوردها — با جلوه‌ی نئوبروتالیستی مرزها و سایه‌ها.

هشدار

یک کادر فراخوانی خطی برای خطاهای فرم، هشدارها و تأییدهای موفقیت — پنل‌هایی با رنگ وضعیت و حاشیه‌های نئوبروتالیست و سایه‌های تند.

ورودی

یک فیلد متنی تک‌خطی برای فرم‌های ورود، نوارهای جستجو و فرم‌های تسویه‌حساب — با جلوه‌های neobrutalist شامل حاشیه ضخیم و سایه سخت.

ورودی OTP

ورودی کد یک‌بار مصرف برای احراز هویت دو مرحله‌ای، تأیید ورود و صفحات پین — اسلات‌های حساس به چسباندن با حاشیه‌های نئوبروتالیست و سایه‌های تند.