НеобруталістReact UI компоненти
Open-source 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
Повідомлення у вигляді «накладених тостів» для підтвердження збереження, завантаження та вікон скасування — з необруталістичним оформленням у вигляді рамок і тіней.
Аватар
Аватар користувача з альтернативним зображенням на основі ініціалів для меню профілів, ланцюжків коментарів та списків команд — із товстими рамками в стилі необруталізму.
Акордеон
Вертикально розташований набір розгортаваних розділів для часто задаваних питань, налаштувань та сторінок з великим обсягом контенту — з необруталістичним оформленням у вигляді рамок і тіней.
Бічна панель
Панель, яка висувається з краю екрана для навігаційних меню, фільтрів та форм редагування — з необруталістичним оформленням у вигляді рамок і тіней.
Бічна панель
Складана панель навігації у вигляді оболонки додатка для інформаційних панелей, документів та адміністративних інструментів — з необруталістичним оформленням у вигляді рамок і тіней.
Ввід OTP
Поле для введення одноразового коду для двофакторної аутентифікації (2FA), підтвердження входу та екрани введення PIN-коду — поля, що підтримують вставку тексту, з необруталістичними рамками та різкими тінями.
Вибір
Випадаюче меню для вибору одного варіанту — поля «Країна», порядок сортування, налаштування теми — з товстими необруталістичними рамками та різкими тінями.
Вибір дати
Поплаваючий календар для вибору окремих дат, діапазонів та днів народження у формах і фільтрах — з необруталістичними рамками та різкими тінями.
Випадаюче меню
Меню, що відкривається натисканням кнопки, для операцій із рядками, перемикання облікових записів та налаштувань відображення — з необруталістичним оформленням у вигляді рамок і тіней.
Висувна панель
Слайдер, що керується жестами та висувається з будь-якого краю, призначений для мобільних меню, фільтрів та швидких форм — з необруталістичними рамками та тінями.
Вкладки
Перемикайтеся між багатошаровими панелями вмісту — сторінками налаштувань, інформаційними панелями та попереднім переглядом коду — із використанням необруталістичного оформлення з рамками та тінями.
Група кнопок
Fuses об’єднує кнопки, панелі інструментів та додатки для введення даних в один рамковий блок — з однією товстою рамкою, однією чіткою тінню та одним спільним натисканням.
Група перемикачів
Групи кнопок із двома станами для панелей інструментів редактора, перемикачів режимів перегляду та панелей фільтрів — із необруталістичним оформленням у вигляді рамок і тіней.
Група перемикачів
Набір перемикачів з одним варіантом вибору для форм, що стосуються тарифних планів, варіантів доставки та налаштувань — з оформленням у стилі необруталізму, що передбачає використання рамок і тіней.
Група полів
Додайте іконки, кнопки та підказки клавіатури до полів введення для панелей пошуку, полів URL-адреси та вікон створення повідомлень у чаті — з необруталістичними рамками та тінями.
Діалог
Модальне вікно для підтверджень, швидких форм та запитів щодо дій, що призводять до втрати даних — накладене на сторінку з товстими рамками та чіткою тінню.
Діалог сповіщення
Модальне вікно, яке призупиняє виконання операцій, що призводять до втрати даних — видалення, вихід із системи, скасування — з використанням необруталістичного стилю оформлення з рамками та тінями.
Елемент
Гнучкий блок із слотами для медіа, заголовка, опису та дії, призначений для стрічок сповіщень, списків налаштувань та рядків файлів — у стилі необруталізму.
Згортаний
Пара «тригер-панель» для дерев файлів, розширених налаштувань та розділів «показати більше» — з необруталістичним оформленням у вигляді рамок і тіней.
Зі зміною розміру
Панелі, які можна перетягувати, для редакторів коду, дерев файлів та макетів інформаційних панелей — з необруталістичним оформленням у вигляді рамок і тіней.
Значок
Невеликі мітки для статусів, кількості та тегів на картках, таблицях та елементах навігації — з необруталістичним оформленням у вигляді рамок і тіней.
Індикатор завантаження
Анімований індикатор завантаження для очікуючих операцій відправки, отримання даних та вбудованих станів зайнятості — іконка, яку можна легко інтегрувати в будь-який елемент управління у стилі «необруталізм».
Календар
Вибір дати у вигляді місячної сітки для бронювання, планування та вибору діапазону — з необруталістичним оформленням у вигляді рамок і тіней.
Картка
Блок з рамкою для інформаційних панелей, тарифних планів та таблиць продуктів — верхній колонтитул, основний вміст та нижній колонтитул із ефектом «жорсткої тіні» у стилі необруталізму.
Картка при наведенні
Плаваюче попереднє переглядання, що відкривається при наведенні курсору — попередній перегляд профілів, посилань, термінів глосарію — з необруталістичним оформленням у вигляді рамок і тіней.
Карусель
Слайд-шоу з можливістю прокрутки для галерей товарів, відгуків та головних блоків — оформлене в стилі необруталізму з використанням рамок та різких тіней.
Клавіша
Накладки на клавіші клавіатури для підказок щодо комбінацій клавіш у меню, підказках та палітрах команд — вбудований елемент `kbd` з необруталістичними рамками та тінями.
Кнопка
Клікабельний тригер для відправки форм, панелей інструментів та підтверджень, що призводять до втрати даних, — з товстими рамками та тінню, яка з’являється при натисканні.
Команда
Палітра команд з керуванням за допомогою клавіатури для меню ⌘K, глобального пошуку та швидких дій — з необруталістичним оформленням у вигляді рамок і тіней.
Комбінований список
Поле введення з автозаповненням, яке фільтрує варіанти під час введення тексту — списки країн, поля для введення тегів, довгі списки — з необруталістичними рамками та тінями.
Контекстне меню
Контекстне меню для рядків файлів, робочих полів та таблиць даних — контекстні дії з необруталістичним оформленням у вигляді рамок і тіней.
Меню навігації
Горизонтальна панель із посиланнями та випадаючими панелями для заголовків сайтів, навігації по документах та оболонок додатків — з необруталістичними рамками та різкими тінями.
Мітка
Підпис для полів введення, прапорців, перемикачів та груп радіо-кнопок — кліки активують елемент управління; набрано шрифтом у стилі необруталізму, що використовується у заголовках.
Навігаційний шлях
Показує місце сторінки в ієрархії сайту — ланцюжки посилань для документів, категорій магазину та інформаційних панелей — жирним шрифтом у стилі необруталізму.
Напрямок
Контекстний провайдер, який перемикає компоненти між напрямками LTR та RTL, завдяки чому меню, повзунки та вкладки правильно відображаються арабською, івритом та перською мовами.
Нативний select
Вбудований HTML-елемент «select», перероблений для форм, фільтрів та вибору країни — випадаюче меню, що відображається операційною системою, з необруталістичними рамками та тінями.
Область прокрутки
Контейнер із можливістю прокрутки та власними міжбраузерними смугами прокрутки для панелей чату, бічних панелей та дерев файлів — із масивним «необруталістським» повзунком.
Пагінація
Посилання на пронумеровані сторінки з елементами керування «попередня/наступна» для результатів пошуку, таблиць та архівів — у стилі необруталізму з використанням рамок і тіней.
Перемикач
Перемикач для миттєвого налаштування — сповіщення, темний режим, прапорці функцій — з необруталістичним оформленням у вигляді рамок і тіней.
Перемикач
Двопозиційна кнопка ввімкнення/вимкнення для елементів керування форматуванням панелі інструментів, вимкнення звуку та закріплення — з необруталістичним оформленням у вигляді рамок і тіней.
Підказка
Підказки при наведенні курсору та фокусуванні для кнопок-піктограм, комбінацій клавіш та скорочених написів — із необруталістичним оформленням у вигляді рамок і тіней.
Повзунок
Поле введення з можливістю перетягування для вибору значення або діапазону — гучність, фільтри за ціною, налаштування — з оформленням у стилі «необруталізм» із використанням рамок і тіней.
Поле
Поля для написів, елементів управління, підказок та повідомлень про помилки у панелях налаштувань, формах оформлення замовлення та процесах реєстрації — у стилі «необруталізму».
Поле введення
Однорядкове текстове поле для введення логіна, рядки пошуку та форми оформлення замовлення — з товстими рамками та різкими тінями у стилі необруталізму.
Порожньо
Заповнювач для випадків, коли пошук не дав результатів, для порожніх інформаційних панелей та екранів першого запуску — піктограма, заголовок та дія, обрамлені в необруталістські рамки.
Прапорець
Двопозиційний перемикач для полів згоди, фільтрів з можливістю множинного вибору та масового виділення рядків — з необруталістичним оформленням у вигляді рамок і тіней.
Прогрес
Тонка смуга, яка заповнюється по мірі виконання завдання — завантаження, встановлення, багатоетапна реєстрація — з використанням необруталістичного стилю оформлення з рамками та тінями.
Роздільник
Горизонтальна або вертикальна лінія, що розділяє меню, панелі інструментів та списки — намальована тим самим суцільним кольором облямівки, що й необруталістські рамки.
Рядок меню
Горизонтальна панель з випадаючими меню для панелей інструментів у стилі мобільних додатків, редакторів та інформаційних панелей — з необруталістичним оформленням у вигляді рамок і тіней.
Скелетон
Блок-заповнювач, що пульсує, для карток, аватарів і таблиць під час завантаження даних — з товстими рамками в стилі необруталізму.
Співвідношення сторін
Забезпечує дотримання фіксованого співвідношення сторін зображень, вбудованих відео та карт під час їхнього масштабування — утиліта для верстки, яка дозволяє карткам у стилі «необруталізм» залишатися в межах сітки.
Спливаюча панель
Плаваюча панель, прив’язана до тригера для вибору дати, фільтрів та вбудованих форм — з необруталістичним оформленням у вигляді рамок і тіней.
Сповіщення
Вбудовані підказки щодо помилок у заповненні форми, попереджень та підтверджень успішного виконання — панелі, забарвлені відповідно до статусу, з необруталістичними рамками та різкими тінями.
Таблиця
Семантична HTML-таблиця для рахунків-фактур, адміністративних списків та таблиць цін — рядки з рамками, заголовки, виділені жирним шрифтом, та виразна тінь у стилі необруталізму.
Таблиця даних
Таблиці з можливістю сортування, фільтрування та розбиття на сторінки для панелей адміністратора, інформаційних панелей та списків замовлень — з необруталістичним оформленням у вигляді рамок і тіней.
Текстова область
Багаторядкове поле введення тексту для коментарів, біографій та повідомлень служби підтримки — з необруталістичним оформленням у вигляді рамок і тіней.
Типографіка
Універсальні шаблони для заголовків, основного тексту, списків, таблиць та вбудованого коду — оформлені у стилі «необруталізм» з масивним виглядом.
Люблять розробники, дизайнери
і креатори
Натрапив на ваш UI-кіт і одразу забрав. Новий, активно підтримується і постійно вдосконалюється — чудова робота! 🤘
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-кіт, який не схожий на все інше. Необруталістичні блоки 🔥 прискорили прототипи дивних макетів.
Nitesh Padghan, Гострайтер Чудовий дизайн лендингу з ідеальним балансом і ритмом. Кольорова палітра разом з анімаціями створює винятковий користувацький досвід.
Alan Obeng-Peprah, Senior Designer @ NativeXAI Я справді вражений дизайном, який вони здали. Фінальний продукт точно збігся з тим, що я уявляв.
Desmond, Співзасновник @ VectorlabsVentures Як власник агенції я зазвичай витрачаю тижні на доведення макетів лендингів для клієнтів. З Neobrutalism.com я підключаю шаблон, правля copy — і готовий до релізу.
Duke Opoku Amankwah, Засновник @ Midas Шаблони не лише візуально сильні, а й надзвичайно добре структуровані. Заощадили нам тижні розробки.
Abiola Braimah, Розробник @ Studio IX Виняткова якість і увага до деталей. Адаптивний дизайн бездоганно працює на всіх пристроях.
Acromond X., Співзасновник @ VectorlabsVentures Інтеграція цих шаблонів у наш workflow помітно скоротила цикл розробки. Відмінна робота.
Raquib S., Backend-розробник Ці шаблони стали нашим основним ресурсом. Код чистий, добре задокументований і легко кастомізується.
Hallic M., Розробник @ AtlasLabs Шаблони Neobrutalism.com знаходять ідеальний баланс між естетикою та функціональністю. Справжній game-changer для наших проєктів.
Ibrahim S., Frontend Lead @ ScaleUp Відмінна підтримка і шаблони преміум-якості. ROI цих шаблонів феноменальний.
Kevin K., CEO @ WebCraft Шаблони Neobrutalism.com повністю змінили наш підхід до клієнтських проєктів. Якість коду виняткова, а дизайни — справді world-class.
Danny G., Засновник DevStack Я користувався багатьма бібліотеками шаблонів, але Neobrutalism.com вирізняється увагою до оптимізації продуктивності й чистої архітектури коду.
Ian D., CTO у Wavelength Анімації та мікроінтеракції в цих шаблонах абсолютно приголомшливі. Найкраща інвестиція для нашої design-команди.
Ben S., Lead Designer у PixelPerfect Як нетехнічний засновник, шаблони Neobrutalism.com допомогли нам запустити MVP в рекордні терміни без компромісів щодо якості дизайну. Наші інвестори були в захваті.
Matthew I., Засновник стартапу Мені подобається, наскільки модульні й добре задокументовані ці компоненти. Ми без тертя змішуємо частини з різних шаблонів.
Garrett P., Frontend Lead у TechFusion ROI шаблонів Neobrutalism.com неймовірний. Ми різко скоротили час розробки й при цьому віддаємо клієнтам сайти вищої якості.
Xavier C., Власник агенції
Компонент
галерея FAQ
Ця таблиця безкоштовних примітивів — бекенди на кожній сторінці документації, CLI, інсталяція та відповідність галереї /docs /components.