نئوبروتالیستکامپوننتهای React UI
کامپوننتهای UI متنباز React با ظاهر نئوبروتالیستی — حاشیهٔ ضخیم، سایهٔ تند و رنگهای جسورانه. با shadcn CLI نصب کنید، یا از طریق ایجنت AI و سرور MCP ما اضافه کنید. با Radix UI، Base UI و React Aria کار میکند. کد در ریپوی شما میآید و مال شما میماند.
Shell command: npx shadcn add neobrutalism.com/r/base/button.json- 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
ورودی کد یکبار مصرف برای احراز هویت دو مرحلهای، تأیید ورود و صفحات پین — اسلاتهای حساس به چسباندن با حاشیههای نئوبروتالیست و سایههای تند.
محبوبِ توسعهدهندگان، طراحان
و سازندگان
اتفاقی به UI kit شما برخوردم و بیدرنگ برش داشتم. نو است، فعالانه نگهداری میشود و مدام بهتر میشود — کار فوقالعاده! 🤘
Ziv Reich, توسعهدهندهٔ نرمافزار فقط خواستم بگویم: کارِ عالی روی neobrutalism.com. واقعاً دوستش دارم. من در طراحی افتضاحم، برای همین این یک نجات بود. توی سایت شخصیام استفادهاش کردم.
Paul Bratslavsky, سازندهٔ Coding With Paul بالاخره سایت شخصیام را با Neobrutalism.com از نو ساختم — کتابخانهٔ سرگرمکننده و شروعش خیلی آسان!
Cameron Blackwood, سازندهٔ محتوا Neobrutalism.com یکی از کتابخانههای محبوبم برای کامپوننتهای UI با سبک رترو است — کامپوننتهایی که واقعاً میشود ship کرد.
Zhengyang Hou, هکر مستقل یکی از کتابخانههای ui محبوبم برای وب. کارِ عالی — امیدوارم خیلی جلوتر برود.
Taseen Tanvir, بنیانگذار و طراح Neobrutalism.com Pro را امتحان کردم — UI kit که شبیه بقیه نیست. بلاکهای نئوبروتالیستی 🔥 پروتوتایپ چیدمانهای عجیب را خیلی سریعتر کردند.
Nitesh Padghan, نویسندهٔ سایه طراحی لندینگپیج زیبا با تعادل و جریان کامل. پالت رنگی همراه با انیمیشنها تجربهٔ کاربری استثنایی میسازد.
Alan Obeng-Peprah, طراح ارشد @ NativeXAI از طراحیای که تحویل دادند واقعاً تحتتأثیرم. محصول نهایی دقیقاً همان چیزی بود که تصور میکردم.
Desmond, همبنیانگذار @ VectorlabsVentures بهعنوان صاحب آژانس معمولاً هفتهها صرف پالایش لیاوت لندینگ مشتریها میکنم. با Neobrutalism.com قالب را میگذارم، کپی را تنظیم میکنم و آمادهام برای انتشار.
Duke Opoku Amankwah, بنیانگذار @ Midas قالبها فقط از نظر بصری خیرهکننده نیستند؛ ساختارشان هم فوقالعاده است. هفتهها زمان توسعه برایمان صرفهجویی کرد.
Abiola Braimah, توسعهدهنده @ Studio IX کیفیت برجسته و دقت در جزئیات. طراحی واکنشگرا روی همهٔ دستگاهها بینقص کار میکند.
Acromond X., همبنیانگذار @ VectorlabsVentures یکپارچهسازی این قالبها در گردشکارمان چرخهٔ توسعه را بهطور چشمگیری کوتاه کرد. کار عالی.
Raquib S., توسعهدهندهٔ بکاند این قالبها منبع اصلی ما شدهاند. کد تمیز، مستندسازیشده و بهراحتی قابل شخصیسازی است.
Hallic M., توسعهدهنده @ AtlasLabs قالبهای Neobrutalism.com تعادل کامل بین زیبایی و کارکرد را برقرار میکنند. واقعاً نقطهٔ عطفی برای پروژههای ما.
Ibrahim S., لید فرانتاند @ ScaleUp پشتیبانی عالی و قالبهای باکیفیت premium. ROI این قالبها شگفتانگیز است.
Kevin K., CEO @ WebCraft قالبهای Neobrutalism.com کاملاً رویکرد ما به پروژههای مشتری را عوض کردند. کیفیت کد استثنایی است و طراحیها واقعاً در سطح جهانیاند.
Danny G., بنیانگذار DevStack کتابخانههای قالب زیادی استفاده کردهام، اما Neobrutalism.com بهخاطر توجه به بهینهسازی عملکرد و معماری کد تمیز متمایز است.
Ian D., CTO در Wavelength انیمیشنها و ریزتعاملهای این قالبها مطلقاً خیرهکنندهاند. بهترین سرمایهگذاری برای تیم طراحی ما.
Ben S., لید دیزاینر در PixelPerfect بهعنوان بنیانگذار غیرفنی، قالبهای Neobrutalism.com کمک کردند MVP را در زمانی رکوردی بدون قربانیکردن کیفیت طراحی لانچ کنیم. سرمایهگذارانمان شگفتزده شدند.
Matthew I., بنیانگذار استارتاپ از ماژولار بودن و مستندسازی خوب این کامپوننتها قدردانی میکنم. توانستیم تکههایی از قالبهای مختلف را بیاصطکاک ترکیب کنیم.
Garrett P., لید فرانتاند در TechFusion ROI قالبهای Neobrutalism.com باورنکردنی است. زمان توسعه را بهشدت کم کردیم و همزمان سایتهای باکیفیتتری به مشتریها تحویل میدهیم.
Xavier C., صاحب آژانس
جزء
گالری FAQ
این شبکهٔ پریمیتیوهای رایگان — بکاندها در هر صفحهٔ مستندات، نصب CLI، و نحوهٔ نگاشت گالری به /docs /components.