НеобруталістReact UI компоненти
Доступні компоненти React у стилі необруталізму — товсті рамки, жорсткі тіні, кричущий колір. Кожен є у версії для Radix UI та Base UI, установлюється через shadcn CLI і дістається вам як код, яким ви володієте.
- 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-таблиця для рахунків-фактур, адміністративних списків та таблиць цін — рядки з рамками, заголовки, виділені жирним шрифтом, та виразна тінь у стилі необруталізму.
Таблиця даних
Таблиці з можливістю сортування, фільтрування та розбиття на сторінки для панелей адміністратора, інформаційних панелей та списків замовлень — з необруталістичним оформленням у вигляді рамок і тіней.
Текстова область
Багаторядкове поле введення тексту для коментарів, біографій та повідомлень служби підтримки — з необруталістичним оформленням у вигляді рамок і тіней.
Типографіка
Універсальні шаблони для заголовків, основного тексту, списків, таблиць та вбудованого коду — оформлені у стилі «необруталізм» з масивним виглядом.