НеобруталистReact UI компоненты
Доступные компоненты React в стиле необрутализма — толстые рамки, жёсткие тени, кричащий цвет. Каждый есть в версии для Radix UI, Base UI и React Aria, ставится через shadcn CLI и достаётся вам как код, которым вы владеете.
Кнопка
01/07Вдавливается в собственную жёсткую тень.
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-таблица для счетов, административных списков и таблиц цен — строки с рамками, заглавные строки, выделенные жирным шрифтом, и резкая тень в стиле необрутализма.
Таблица данных
Таблицы с возможностью сортировки, фильтрации и пагинации для панелей администратора, информационных панелей и списков заказов — с оформлением в стиле «необрутализм», включающим рамки и тени.
Текстовая область
Многострочное поле ввода текста для комментариев, биографий и сообщений в службу поддержки — с оформлением в стиле необрутализма, включающим рамки и тени.
Типографика
Универсальные шаблоны для заголовков, основного текста, списков, таблиц и встроенного кода — оформленные в стиле «необрутализм» с акцентом на массивность.
Флажок
Двухпозиционный переключатель для полей согласия, фильтров с возможностью множественного выбора и массового выделения строк — с использованием стилистических элементов необрутализма: рамок и теней.
Хлебные крошки
Показывает местоположение страницы в иерархии сайта — цепочки ссылок для документов, категорий магазина и информационных панелей — жирным шрифтом в стиле необрутализма.
Элемент
Гибкая строка с полями для мультимедиа, заголовка, описания и действия, предназначенная для лент уведомлений, списков настроек и строк с файлами — в стиле необрутализма.