Перейти до вмісту
1.6k

Introduction

Що таке необруталізм і як система дизайну Neobrutalism.com втілює його у React — компоненти з відкритим кодом, блоки та шаблони для shadcn CLI.

Що таке необруталізм?

Необруталізм — це стиль веб-дизайну, що з’явився наприкінці 2010-х років як реакція на одноманітність плоского мінімалістичного дизайну. Він переймає суворість бруталістської архітектури — натуральні матеріали, видиму конструкцію — і втілює її на екрані за допомогою яскравих кольорів та грайливої геометрії.

Його можна впізнати за п’ятьма ознаками:

  • Товсті рамки — кожен елемент обведений, зазвичай суцільною чорною лінією.
  • Різкі тіні — плоскі зміщення без розмиття, завдяки чому елементи виглядають так, ніби фізично розташовані один над одним на сторінці.
  • Яскраві кольори — контрастні, насичені заливки. Без градієнтів, без «скломорфізму».
  • Прямі кути та масивний шрифт — геометрія, яка займає простір, а не виправдовується за це.
  • Тактильна взаємодія — при натисканні кнопки помітно вдавлюються у свої тіні.

Нічого не «плаває», нічого не розмивається, нічого не ховається. Редизайн сайту Gumroad у 2021 році зробив цей стиль мейнстрімом; сьогодні це найпопулярніший вибір для продуктів, які мають виглядати продумано, а не як стандартний шаблон.

Що таке Neobrutalism.com?

Neobrutalism.com — це система дизайну, яка надає стиль сайту React і побудована на тій самій моделі реєстру, що й shadcn/ui. Вам не потрібно встановлювати пакет: при виконанні команди shadcn CLI вихідний код кожного компонента копіюється у ваш проєкт, і від цього моменту це вже ваш код.

Що всередині:

  • Компоненти — повний набір, оформлений за єдиним стилем, завдяки чому межі, тіні та шрифти гармонійно поєднуються між собою.
  • Блоки — готові елементи: герої, таблиці цін, екрани авторизації, інформаційні панелі.
  • Шаблони — готові сайти та панелі адміністратора.
  • Теми — конструктор тем із пресетами, якими можна ділитися.
  • Figma набір — та сама система для дизайнерів.
  • MCP сервер — редактори на базі штучного інтелекту, такі як Claude Code та Cursor, можуть додавати компоненти за назвою.

Дві прості фігури, один стиль

Кожен компонент постачається у двох варіантах. Виберіть потрібний варіант для кожного компонента під час встановлення — URL-адреса інсталяції визначає, який саме варіант ви отримаєте:

  • Radix UI — ті елементарні типи, на яких вже працюють більшість проектів shadcn.
  • Base UI — новіші примітиви від команди Radix + MUI.

Ті самі зовнішній вигляд, ті самі експортні формати, той самий API. Доступність — фокус, клавіатура, екранні зчитувачі — забезпечується завдяки базовим елементам, що лежать в основі.

Спробуйте

Одна команда, жодних налаштувань:

pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
npx shadcn@latest add https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json

Потім перейдіть у розділ «Встановлення», щоб завантажити шрифти та маркери тем, або спочатку перегляньте компоненти.