1 мая 2026 г.

react необрутализм UI-дизайн туториал retroui

Как перевести любой проект React на необрутализм за 10 минут

Хотите смело преобразить своё скучное приложение на React? Научитесь превращать любой проект React в эффектный необруталистский дизайн всего за 10 минут с помощью Neobrutalism. Пошаговый туториал с примерами до и после.

Dov Azencot

@DovAzencot

Поделиться в X

Будем честны: ваше приложение на React, скорее всего, выглядит как все остальные приложения на React. Чистое? Конечно. Профессиональное? Безусловно. Запоминающееся? Даже близко нет.

Но что, если мы скажем, что всего за 10 минут вы можете превратить свой безликий проект в нечто, что кричит о характере? В нечто, от чего люди восклицают: «Ого, а это ЧТО?»

В этом сила необрутализма — стиля дизайна, который смел, бескомпромиссен и невозможен для игнорирования. А с Neobrutalism перевести ваш проект React проще некуда.

Берите кофе (или энергетик, без осуждения), и давайте превратим это ванильное приложение во что-нибудь с перчинкой.

Так что вообще такое необрутализм?

Прежде чем нырять, договоримся о терминах. Необрутализм — это движение в дизайне, которое черпает вдохновение в грубой, залитой бетоном брутальной архитектуре 1950-х и придаёт ей современный цифровой оттенок.

Представьте:

Толстые чёрные рамки на всём
Жёсткие тени (без этой ерунды с мягким размытием)
Контрастные цвета вроде чёрного, белого и неоново-жёлтого
Нулевое скругление углов (остро и угловато, детка)
Асимметричные макеты, которые ломают сетку

Это антиперфекционизм. Это бунтарство. Это дизайнерский эквивалент кожаной куртки на заседании совета директоров. И это работает.

Почему Neobrutalism?

Можно собирать необруталистские компоненты с нуля, но зачем изобретать велосипед, когда есть Neobrutalism? Это UI-библиотека для React, созданная специально под необрутализм, с:

Готовыми компонентами в фирменной брутальной эстетике
Простой установкой через CLI
Полной кастомизацией через Tailwind CSS
Работает с Next.js, Vite, Remix — по сути с любой сборкой React

К тому же она бесплатная и с открытым исходным кодом. Приступим.

Шаг 1: подготовьте проект (2 минуты)

Начнём с главного. Если у вас уже есть проект на React, вы впереди. Если нет, быстро развернём приложение Next.js (но это работает с любым фреймворком React).


pnpm create next-app@latest my-brutal-app
cd my-brutal-app
npx create-next-app@latest my-brutal-app
cd my-brutal-app
yarn create next-app@latest my-brutal-app
cd my-brutal-app
bunx --bun create-next-app@latest my-brutal-app
cd my-brutal-app

Соглашайтесь на TypeScript и Tailwind CSS, когда спросят. Понадобятся оба.

Если вы используете Vite или Create React App, это тоже отлично — настройка почти идентична.

Шаг 2: установите Neobrutalism (1 минута)

А теперь — магия. Нужно инициализировать shadcn (Neobrutalism использует его под капотом) и установить утилиты Neobrutalism.

Выполните эту команду:


pnpm dlx shadcn@latest init
npx shadcn@latest init
yarn dlx shadcn@latest init
bunx --bun shadcn@latest init

Появятся несколько вопросов. Вот что стоит выбрать:

Style: Default
Base color: Slate (не особо важно, мы всё равно переопределим)
CSS variables: Yes

Далее установите утилиты Neobrutalism:


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

Готово. Вот и всё. Теперь у вас есть фундамент для сборки брутальных интерфейсов.

Шаг 3: добавьте необруталистскую тему (2 минуты)

Именно здесь трансформация начинается по-настоящему. Откройте файл global.css (обычно в app/globals.css или src/index.css) и замените переменные темы на фирменную брутальную тему Neobrutalism.

Вставьте это в свой CSS:

@theme {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: 0;
 
  --shadow-xs: 1px 1px 0 0 var(--border);
  --shadow-sm: 2px 2px 0 0 var(--border);
  --shadow: 3px 3px 0 0 var(--border);
  --shadow-md: 4px 4px 0 0 var(--border);
  --shadow-lg: 6px 6px 0 0 var(--border);
  --shadow-xl: 10px 10px 0 1px var(--border);
  --shadow-2xl: 16px 16px 0 1px var(--border);
 
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-border: var(--border);
}
 
:root {
  --radius: 0;
  --background: #fff;
  --foreground: #000;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --border: #000;
}
 
.dark {
  --background: #1a1a1a;
  --foreground: #f5f5f5;
  --primary: #ffdb33;
  --primary-foreground: #000;
  --secondary: #3a3a3a;
  --secondary-foreground: #f5f5f5;
  --border: #3a3a3a;
}

Что только что произошло?

Мы убрали весь border-radius (больше никаких скруглённых углов)
Мы заменили мягкие тени на жёсткие, со смещением
Мы задали смелую чёрно-бело-жёлтую цветовую схему
Мы добавили поддержку тёмной темы (потому что мы не дикари)

Ваше приложение уже начинает выглядеть иначе. Но мы ещё не закончили.

Шаг 4: установите первые компоненты (2 минуты)

Возьмём настоящие компоненты. Начнём с базового: Button, Card и Input.

Выполните эти команды по очереди:


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

Каждый компонент добавляется в вашу папку components/neobrutalism/, готовый к использованию. Не нужно писать ни строчки CSS.

Шаг 5: замените свои компоненты (2 минуты)

Теперь начинается самое интересное — замена ваших старых скучных компонентов на новые, брутальные.

До:

// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
  Click Me
</button>

После:

import { Button } from "@/components/neobrutalism/Button";
 
<Button>Click Me</Button>

Вот так просто у вас появилась кнопка с толстыми чёрными рамками, жёсткой тенью и тем самым фирменным необруталистским настроем.

Сделаем то же самое с карточкой:

До:

<div className="bg-white shadow-lg rounded-lg p-6">
  <h2 className="text-2xl font-bold">My Card</h2>
  <p className="text-gray-600">Some generic content here.</p>
</div>

После:

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/neobrutalism/Card";
 
<Card>
  <CardHeader>
    <CardTitle>My Card</CardTitle>
    <CardDescription>Now with 100% more attitude.</CardDescription>
  </CardHeader>
  <CardContent>
    Some bold content here.
  </CardContent>
</Card>

Та же структура, совершенно другой настрой. Теперь у карточки острые края, смелые рамки и жёсткая тень, из-за которой она словно выпрыгивает со страницы.

Шаг 6: добавьте необруталистские шрифты (1 минута)

Типографика в необрутализме ОГРОМНА. Стандартные системные шрифты не годятся. Neobrutalism рекомендует Archivo Black для заголовков и Space Grotesk для основного текста.

Если вы используете Next.js, добавьте это в свой app/layout.tsx:

import { Archivo_Black, Space_Grotesk } from "next/font/google";
 
const archivoBlack = Archivo_Black({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-head",
  display: "swap",
});
 
const spaceGrotesk = Space_Grotesk({
  subsets: ["latin"],
  weight: "400",
  variable: "--font-sans",
  display: "swap",
});
 
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  );
}

Теперь заголовки массивные и смелые, а основной текст остаётся чистым и читаемым.

Шаг 7: доработайте и настройте (по желанию)

На этом этапе вы по сути закончили, но если хотите настроить глубже, Neobrutalism это упрощает.

Хотите другой акцентный цвет? Измените переменную --primary в своём CSS.

:root {
  --primary: #ff006e; /* Hot pink instead of yellow */
}

Хотите тени помягче? Подстройте переменные теней.

--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */

Хотите добавить больше компонентов? Загляните в полную библиотеку на neobrutalism.com/docs/components. Там есть поля ввода, бейджи, диалоги, таблицы и многое другое — всё оформлено в той самой брутальной эстетике.

До и после: трансформация

Хорошо, посмотрим на разницу. Вот как выглядит простой лендинг до и после необруталистской конвертации.

До: типовое приложение React

export default function GenericLanding() {
  return (
    <div className="min-h-screen bg-gray-50 flex items-center justify-center">
      <div className="max-w-md bg-white shadow-lg rounded-lg p-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-4">
          Welcome to My App
        </h1>
        <p className="text-gray-600 mb-6">
          This is a clean, minimal design that looks like every other React app.
        </p>
        <input
          type="email"
          placeholder="Enter your email"
          className="w-full px-4 py-2 border border-gray-300 rounded mb-4"
        />
        <button className="w-full bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
          Get Started
        </button>
      </div>
    </div>
  );
}

Что здесь не так?

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

После: необруталистское преображение

import { Button } from "@/components/neobrutalism/Button";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/neobrutalism/Card";
import { Input } from "@/components/neobrutalism/Input";
 
export default function BrutalLanding() {
  return (
    <div className="min-h-screen bg-[#ffdb33] flex items-center justify-center p-4">
      <Card className="max-w-md w-full">
        <CardHeader>
          <CardTitle className="text-4xl font-head uppercase">
            Welcome to My App
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          <p className="text-lg font-sans">
            This is a bold, memorable design that actually stands out.
          </p>
          <Input type="email" placeholder="Enter your email" />
          <Button className="w-full">Get Started</Button>
        </CardContent>
      </Card>
    </div>
  );
}

Что изменилось?

Фон: сменился со скучного серого на электрический жёлтый
Типографика: смелый заголовок в верхнем регистре на Archivo Black
Рамки: у всего толстые чёрные рамки
Тени: жёсткие, со смещением, вместо мягких размытий
Углы: нулевой border-radius — остро и угловато
Настрой: от «корпоративной брошюры» к «инди-стартапу с характером»

Это та же структура компонентов, тот же макет, но ощущается совершенно иначе. Такое люди запомнят.

Ещё пример: виджет дашборда

Разберём пример посложнее — карточку статистики для дашборда.

До: пресный дашборд

export default function GenericStats() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Total Users</p>
        <p className="text-3xl font-bold text-gray-900">1,284</p>
        <p className="text-green-500 text-sm">+12% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Revenue</p>
        <p className="text-3xl font-bold text-gray-900">$52,340</p>
        <p className="text-green-500 text-sm">+8% from last month</p>
      </div>
      <div className="bg-white rounded-lg shadow p-6">
        <p className="text-gray-500 text-sm">Active Now</p>
        <p className="text-3xl font-bold text-gray-900">127</p>
        <p className="text-red-500 text-sm">-3% from last hour</p>
      </div>
    </div>
  );
}

После: брутальный дашборд

import { Card, CardContent } from "@/components/neobrutalism/Card";
 
export default function BrutalStats() {
  return (
    <div className="grid grid-cols-3 gap-6">
      <Card className="bg-[#ffdb33]">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Total Users</p>
          <p className="text-5xl font-head mb-2">1,284</p>
          <p className="text-sm font-bold">▲ 12% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Revenue</p>
          <p className="text-5xl font-head mb-2">$52,340</p>
          <p className="text-sm font-bold">▲ 8% from last month</p>
        </CardContent>
      </Card>
      <Card className="bg-black text-white">
        <CardContent className="pt-6">
          <p className="text-sm font-bold uppercase mb-2">Active Now</p>
          <p className="text-5xl font-head mb-2">127</p>
          <p className="text-sm font-bold">▼ 3% from last hour</p>
        </CardContent>
      </Card>
    </div>
  );
}

В чём разница?

Цветовые блоки: у каждой карточки свой фон (жёлтый, белый, чёрный)
Смелая типографика: цифры огромные и используют дисплейный шрифт
Высокий контраст: белый текст на чёрном мгновенно создаёт визуальную иерархию
Подписи в верхнем регистре: всё ощущается более продуманным и смелым
Стрелки вместо цвета: для ясности используются символы ▲ и ▼

Те же данные, кардинально другая подача. Брутальная версия ощущается уверенной и продуманной, а не просто собранной.

Советы профи по необруталистскому дизайну

Теперь, когда вы освоили основы, вот несколько советов, чтобы по-настоящему попасть в эстетику:

1. Принимайте асимметрию

Не бойтесь ломать сетку. Смещайте элементы, накладывайте рамки, дайте вещам дышать неровно. Совершенство — это скучно.

2. Используйте цвет осознанно

Необрутализм обожает контрастные цветовые сочетания. Чёрный и белый как база, затем добавьте один-два акцентных цвета (жёлтый, розовый, голубой). Не уходите в радугу — выберите настрой и держитесь его.

3. Не мельчите с типографикой

Заголовки должны быть ГИГАНТСКИМИ. Основной текст может быть обычным, но ваши H1 должны приковывать внимание. Используйте жирные буквы в верхнем регистре, когда хотите заявить о себе.

4. Добавляйте микровзаимодействия

Брутальное не значит статичное. Добавляйте эффекты наведения, где кнопки слегка сдвигаются или тени становятся больше. Держите их сдержанными, но заметными.

<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
  Click Me
</Button>

5. Не перебарщивайте

Не каждому элементу нужна толстая рамка. Не каждой секции нужен яркий фон. Баланс по-прежнему важен — просто с уклоном в смелость.

Что делать дальше

Поздравляем. Вы только что полностью обновили внешний вид своего проекта React примерно за 10 минут. Вот что можно сделать дальше:

Изучите больше компонентов

У Neobrutalism есть полная библиотека компонентов — бейджи, диалоги, таблицы, вкладки и другое. Загляните в документацию по компонентам и посмотрите, что ещё можно добавить.

Настройте свою тему

Поиграйте с CSS-переменными под свой бренд. Меняйте акцентные цвета, подстраивайте интенсивность теней или регулируйте отступы, чтобы сделать тему своей.

Постройте что-нибудь крутое

Теперь, когда ваше приложение не выглядит типовым, покажите его. Поделитесь в Twitter, выложите на Reddit, добавьте в портфолио. Необрутализм замечают.

Присоединяйтесь к сообществу

У Neobrutalism есть активный Discord, где дизайнеры и разработчики делятся проектами, задают вопросы и упоённо обсуждают брутальный дизайн. Заходите и поздоровайтесь.

Напоследок

Большинство приложений на React выглядят одинаково, потому что большинство разработчиков тянутся к одним и тем же инструментам — Material UI, Bootstrap, shadcn с настройками по умолчанию. В них нет ничего плохого (они отличные), но выделиться они не помогут.

Необрутализм — короткий путь к характеру. Он смелый, запоминающийся и на удивление легко внедряется с правильными инструментами. Neobrutalism даёт всё необходимое, чтобы сделать переход без пересборки с нуля.

Всего за 10 минут вы прошли путь от «ещё одно приложение на React» до «погоди, а это ЧТО?». И, честно говоря? Это сильно.

Так что вперёд — сделайте своё приложение невозможным для игнорирования.

А теперь идите и постройте что-нибудь брутальное. 🚀

← Назад к статьям

Как перевести любой проект React на необрутализм за 10 минут

Так что вообще такое необрутализм?

Почему Neobrutalism?

Шаг 1: подготовьте проект (2 минуты)

Шаг 2: установите Neobrutalism (1 минута)

Шаг 3: добавьте необруталистскую тему (2 минуты)

Шаг 4: установите первые компоненты (2 минуты)

Шаг 5: замените свои компоненты (2 минуты)

Шаг 6: добавьте необруталистские шрифты (1 минута)

Шаг 7: доработайте и настройте (по желанию)

До и после: трансформация

До: типовое приложение React

После: необруталистское преображение

Ещё пример: виджет дашборда

До: пресный дашборд

После: брутальный дашборд

Советы профи по необруталистскому дизайну

Что делать дальше

Напоследок

Как построить необруталистский сайт на Tailwind CSS v4 (пошагово)

Топ-8 библиотек анимации для React в 2026 году

20 необруталистских цветовых палитр с hex-кодами (готовы к копированию)

Как перевести любой проект React на необрутализм за 10 минут

Так что вообще такое необрутализм?

Почему Neobrutalism?

Шаг 1: подготовьте проект (2 минуты)

Шаг 2: установите Neobrutalism (1 минута)

Шаг 3: добавьте необруталистскую тему (2 минуты)

Шаг 4: установите первые компоненты (2 минуты)

Шаг 5: замените свои компоненты (2 минуты)

Шаг 6: добавьте необруталистские шрифты (1 минута)

Шаг 7: доработайте и настройте (по желанию)

До и после: трансформация

До: типовое приложение React

После: необруталистское преображение

Ещё пример: виджет дашборда

До: пресный дашборд

После: брутальный дашборд

Советы профи по необруталистскому дизайну

Что делать дальше

Напоследок

Читайте также

Как построить необруталистский сайт на Tailwind CSS v4 (пошагово)

Топ-8 библиотек анимации для React в 2026 году

20 необруталистских цветовых палитр с hex-кодами (готовы к копированию)