Необруталист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
Уведомления в виде наложенных друг на друга тостов для подтверждения сохранения, загрузки и окон отмены действий — с использованием необруталистского стиля оформления с рамками и тенями.
Аватар
Аватар пользователя с запасным вариантом в виде инициалов для меню профилей, цепочек комментариев и списков команд — с толстой рамкой в стиле «необрутализм».
Аккордеон
Вертикально расположенный набор раскрывающихся разделов для часто задаваемых вопросов, настроек и страниц с большим объёмом контента — с использованием необруталистского стиля оформления с рамками и тенями.
Боковая панель
Панель, выдвигающаяся с края экрана для отображения навигационных панелей, фильтров и форм редактирования — с оформлением в стиле необрутализма, включающим рамки и тени.
Боковая панель
Сворачиваемая панель навигации в стиле «app-shell» для информационных панелей, документов и инструментов администрирования — с оформлением в стиле «необрутализм», включающим рамки и тени.
Ввод 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.