Перейти к содержимому
1.6k

Introduction

Что такое необрутализм и как система дизайна Neobrutalism.com воплощает его в React — компоненты с открытым исходным кодом, блоки и шаблоны для shadcn CLI.

Что такое необрутализм?

Необрутализм — это стиль веб-дизайна, возникший в конце 2010-х годов в ответ на однообразие «плоского» минималистичного дизайна. Он переносит на экран суровую естественность архитектуры брутализма — натуральные материалы, видимую конструкцию — с помощью ярких цветов и игривой геометрии.

Его можно распознать по пяти признакам:

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

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

Что такое Neobrutalism.com?

Neobrutalism.com — это система дизайна, которая привносит стиль в React и построена на той же модели реестра, что и shadcn/ui. Вам не нужно устанавливать пакет: при выполнении команды shadcn CLI исходный код каждого компонента копируется в ваш проект, и с этого момента он становится вашим кодом.

Что входит в комплект:

  • Компоненты — полный набор, оформленный в едином стиле, благодаря чему границы, тени и шрифты гармонично сочетаются друг с другом.
  • Блоки — готовые элементы: герои, таблицы цен, экраны авторизации, панели управления.
  • Шаблоны — готовые сайты и панели администратора.
  • Темы — конструктор тем с настраиваемыми шаблонами, которыми можно делиться.
  • Figma kit — та же система для дизайнеров.
  • 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

Затем перейдите в раздел «Установка», чтобы установить шрифты и токены тем, либо сначала ознакомьтесь с компонентами.