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-кодами (готові до копіювання)