1 Mei 2026

react neobrutalisme desain UI tutorial retroui

Cara Mengubah Proyek React Apa Pun ke Neobrutalisme dalam 10 Menit

Ingin memberi aplikasi React Anda yang membosankan sebuah rombakan yang berani? Pelajari cara mengubah proyek React apa pun menjadi desain neobrutalis yang memukau hanya dalam 10 menit memakai Neobrutalism. Tutorial langkah demi langkah dengan contoh sebelum/sesudah.

Dov Azencot

@DovAzencot

Bagikan di X

Mari jujur: aplikasi React Anda mungkin terlihat seperti semua aplikasi React lainnya di luar sana. Bersih? Tentu. Profesional? Pasti. Berkesan? Bahkan tidak mendekati.

Tetapi bagaimana jika saya beri tahu bahwa dalam 10 menit saja, Anda bisa mengubah proyek Anda yang tampak generik menjadi sesuatu yang meneriakkan kepribadian? Sesuatu yang membuat orang berkata, "Wah, itu APA?"

Itulah kekuatan neobrutalisme: gaya desain yang berani, tanpa kompromi, dan mustahil diabaikan. Dan dengan Neobrutalism, mengubah proyek React Anda itu mudah secara keterlaluan.

Ambil kopi Anda (atau minuman energi, tanpa penghakiman), dan mari ubah aplikasi hambar itu menjadi sesuatu yang lebih berbumbu.

Sebenarnya Apa Itu Neobrutalisme?

Sebelum menyelam, mari samakan persepsi dahulu. Neobrutalisme adalah gerakan desain yang mengambil inspirasi dari arsitektur brutalis tahun 1950-an yang mentah dan sarat beton, lalu memberinya sentuhan modern dan digital.

Bayangkan:

Garis tepi hitam yang tebal pada segalanya
Bayangan keras (tanpa omong kosong blur lembut itu)
Warna berkontras tinggi seperti hitam, putih, dan kuning neon
Nol sudut membulat (semuanya tajam dan bersudut)
Tata letak asimetris yang mendobrak grid

Ini antiperfeksionisme. Ini memberontak. Ini setara dalam desain dengan mengenakan jaket kulit ke rapat dewan direksi. Dan ini berhasil.

Kenapa Neobrutalism?

Anda bisa saja membangun komponen neobrutalis dari nol, tetapi kenapa menemukan kembali roda jika Neobrutalism sudah ada? Ini adalah pustaka UI untuk React yang dibuat khusus untuk neobrutalisme, dengan:

Komponen siap pakai dengan estetika brutal yang khas itu
Instalasi mudah lewat CLI
Kustomisasi penuh dengan Tailwind CSS
Kompatibel dengan Next.js, Vite, Remix: pada dasarnya konfigurasi React apa pun

Terlebih lagi, ini gratis dan open source. Mari mulai.

Langkah 1: Siapkan Proyek Anda (2 menit)

Hal utama dahulu. Jika Anda berangkat dari proyek React yang sudah ada, Anda sudah selangkah di depan. Jika tidak, mari kita bangun cepat sebuah aplikasi Next.js (tetapi ini berfungsi dengan framework React apa pun).


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

Jawab ya untuk TypeScript dan Tailwind CSS saat ditanya. Kita membutuhkan keduanya.

Jika Anda memakai Vite atau Create React App, itu juga bagus: penyiapannya nyaris identik.

Langkah 2: Instal Neobrutalism (1 menit)

Kini, keajaibannya. Kita perlu menginisialisasi shadcn (Neobrutalism bertumpu padanya di balik layar) dan menginstal utilitas Neobrutalism.

Jalankan perintah ini:


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

Beberapa pertanyaan akan muncul. Berikut yang sebaiknya Anda pilih:

Style: Default
Base color: Slate (tidak masalah, toh akan kita timpa)
CSS variables: Yes

Berikutnya, instal utilitas 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

Selesai. Itu saja. Kini Anda punya fondasi untuk membangun antarmuka brutalis.

Langkah 3: Tambahkan Tema Neobrutalis (2 menit)

Di sinilah transformasi benar-benar dimulai. Buka berkas global.css Anda (biasanya di app/globals.css atau src/index.css) dan ganti variabel temanya dengan tema brutal khas Neobrutalism.

Tempel ini ke CSS Anda:

@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;
}

Apa yang baru saja terjadi?

Kita menghapus semua border-radius (tak ada lagi sudut membulat)
Kita mengganti bayangan lembut dengan bayangan keras yang punya offset
Kita menyiapkan skema warna hitam/putih/kuning yang tegas
Kita menambahkan dukungan mode gelap (karena kita bukan orang barbar)

Aplikasi Anda sudah mulai terlihat berbeda. Tetapi kita belum selesai.

Langkah 4: Instal Komponen Pertama Anda (2 menit)

Mari ambil beberapa komponen sungguhan. Kita mulai dari yang esensial: Button, Card, dan Input.

Jalankan perintah-perintah ini satu per satu:


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

Setiap komponen ditambahkan ke folder components/neobrutalism/ Anda, siap dipakai. Tak perlu menulis satu baris CSS pun.

Langkah 5: Ganti Komponen Anda (2 menit)

Kini tibalah bagian serunya: mengganti komponen lama Anda yang membosankan dengan yang baru, yang benar-benar brutal.

Sebelum:

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

Sesudah:

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

Begitu saja, Anda sudah punya tombol dengan garis tepi hitam yang tebal, bayangan keras, dan nuansa neobrutalis yang khas itu.

Mari lakukan hal yang sama untuk sebuah kartu:

Sebelum:

<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>

Sesudah:

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>

Struktur yang sama, nuansa yang sama sekali berbeda. Kartu kini punya tepi tajam, garis tepi tebal, dan bayangan keras yang membuatnya seolah melompat dari halaman.

Langkah 6: Tambahkan Font Neobrutalis (1 menit)

Tipografi itu SANGAT BESAR dalam neobrutalisme. Font sistem bawaan tidak akan cukup. Neobrutalism merekomendasikan Archivo Black untuk judul dan Space Grotesk untuk teks isi.

Jika Anda memakai Next.js, tambahkan ini ke app/layout.tsx Anda:

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>
  );
}

Kini judul Anda gempal dan tebal, sementara teks isi tetap bersih dan mudah dibaca.

Langkah 7: Perhalus dan Sesuaikan (Opsional)

Pada titik ini Anda pada dasarnya sudah selesai, tetapi jika Anda ingin menyesuaikan lebih jauh, Neobrutalism membuatnya mudah.

Ingin warna aksen yang berbeda? Ganti variabel --primary di CSS Anda.

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

Ingin bayangan yang lebih lembut? Sesuaikan variabel bayangannya.

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

Ingin menambah lebih banyak komponen? Jelajahi pustaka lengkapnya di neobrutalism.com/docs/components. Ada input, badge, dialog, tabel, dan banyak lagi, semuanya bergaya estetika brutal itu.

Sebelum dan Sesudah: Transformasinya

Baiklah, mari lihat perbedaannya. Berikut tampilan sebuah landing page sederhana sebelum dan sesudah konversi neobrutalis.

Sebelum: Aplikasi React Generik

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>
  );
}

Apa yang salah dengan ini?

Secara teknis, tidak ada. Fungsional. Bersih. Tetapi juga sepenuhnya terlupakan. Jika Anda menunjukkannya kepada 100 orang, mereka akan mengiranya sama dengan belasan situs lain yang mereka lihat minggu ini.

Sesudah: Rombakan Neobrutalis

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>
  );
}

Apa yang berubah?

Latar: berubah dari abu-abu yang membosankan menjadi kuning elektrik
Tipografi: judul yang tebal, huruf kapital, dengan Archivo Black
Garis tepi: semuanya punya garis tepi hitam yang tebal
Bayangan: keras dan beroffset, alih-alih blur lembut
Sudut: nol border-radius, tajam dan bersudut
Nuansa: dari "brosur korporat" menjadi "startup indie dengan karakter"

Ini struktur komponen yang sama, tata letak yang sama, tetapi kesannya sama sekali berbeda. Orang akan mengingat yang ini.

Mari lihat contoh yang lebih rumit: sebuah kartu statistik dasbor.

Sebelum: Dasbor yang Hambar

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>
  );
}

Sesudah: Dasbor yang Brutal

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>
  );
}

Apa yang berbeda?

Color blocking: setiap kartu punya latar berbeda (kuning, putih, hitam)
Tipografi tebal: angka-angkanya raksasa dan memakai font display
Kontras tinggi: teks putih di atas hitam menciptakan hierarki visual seketika
Label huruf kapital: membuat semuanya terasa lebih disengaja dan tebal
Panah alih-alih warna: memakai simbol ▲ dan ▼ untuk kejelasan

Data yang sama, penyajian yang jauh berbeda. Versi brutalnya terasa percaya diri dan terancang, bukan sekadar dirakit.

Tips Pro untuk Desain Neobrutalis

Kini setelah Anda menguasai dasarnya, berikut beberapa tips untuk benar-benar menaklukkan estetikanya:

1. Rangkul Asimetri

Jangan takut mendobrak grid. Geser elemen, tumpuk garis tepi, biarkan segala sesuatu bernapas dengan tidak rata. Kesempurnaan itu membosankan.

2. Pakai Warna dengan Niat

Neobrutalisme menyukai paduan warna berkontras tinggi. Hitam dan putih sebagai basis, lalu tambahkan satu atau dua warna aksen (kuning, merah muda, sian). Jangan berlebihan seperti pelangi: pilih satu nuansa dan tekuni.

3. Buat Besar pada Tipografi

Judul harus RAKSASA. Teks isi boleh normal, tetapi H1 Anda harus merebut perhatian. Pakai huruf yang tebal dan kapital saat Anda ingin membuat pernyataan.

4. Tambahkan Mikrointeraksi

Brutal bukan berarti statis. Tambahkan efek hover di mana tombol bergeser sedikit atau bayangan membesar. Buat halus tetapi terasa.

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

5. Jangan Berlebihan

Tidak setiap elemen butuh garis tepi tebal. Tidak setiap bagian butuh latar yang mencolok. Keseimbangan tetap penting, hanya saja condong ke arah keberanian.

Apa yang Harus Dilakukan Selanjutnya

Selamat. Anda baru saja memberi proyek React Anda perombakan visual yang lengkap dalam sekitar 10 menit. Berikut yang bisa Anda lakukan dari sini:

Jelajahi Lebih Banyak Komponen

Neobrutalism punya pustaka komponen yang lengkap: badge, dialog, tabel, tab, dan lainnya. Lihat dokumentasi komponennya dan temukan apa lagi yang bisa Anda tambahkan.

Sesuaikan Tema Anda

Bermainlah dengan variabel CSS agar cocok dengan merek Anda. Ganti warna aksen, sesuaikan intensitas bayangan, atau atur spasi untuk menjadikannya milik Anda.

Bangun Sesuatu yang Keren

Kini setelah aplikasi Anda tidak tampak generik, pamerkan. Bagikan di Twitter, unggah ke Reddit, tambahkan ke portofolio Anda. Neobrutalisme menarik perhatian.

Bergabung dengan Komunitas

Neobrutalism punya Discord yang sangat aktif tempat desainer dan developer berbagi proyek, mengajukan pertanyaan, dan bersemangat soal desain brutal. Mampirlah dan sapa.

Renungan Akhir

Sebagian besar aplikasi React terlihat serupa karena sebagian besar developer meraih perkakas yang sama: Material UI, Bootstrap, shadcn dengan pengaturan bawaan. Tidak ada yang salah dengan itu (semuanya bagus), tetapi mereka tidak akan membantu Anda menonjol.

Neobrutalisme adalah jalan pintas menuju kepribadian. Ia berani, berkesan, dan mengejutkan mudahnya diterapkan dengan perkakas yang tepat. Neobrutalism memberi Anda semua yang dibutuhkan untuk beralih tanpa membangun ulang dari nol.

Dalam 10 menit saja, Anda beralih dari "sekadar aplikasi React lainnya" menjadi "tunggu, itu APA?". Dan sejujurnya? Itu hal yang kuat.

Jadi silakan: buat aplikasi Anda mustahil diabaikan.

Sekarang keluarlah dan bangun sesuatu yang brutal. 🚀

← Kembali ke artikel

Cara Mengubah Proyek React Apa Pun ke Neobrutalisme dalam 10 Menit

Sebenarnya Apa Itu Neobrutalisme?

Kenapa Neobrutalism?

Langkah 1: Siapkan Proyek Anda (2 menit)

Langkah 2: Instal Neobrutalism (1 menit)

Langkah 3: Tambahkan Tema Neobrutalis (2 menit)

Langkah 4: Instal Komponen Pertama Anda (2 menit)

Langkah 5: Ganti Komponen Anda (2 menit)

Langkah 6: Tambahkan Font Neobrutalis (1 menit)

Langkah 7: Perhalus dan Sesuaikan (Opsional)

Sebelum dan Sesudah: Transformasinya

Sebelum: Aplikasi React Generik

Sesudah: Rombakan Neobrutalis

Contoh Lain: Widget Dasbor

Sebelum: Dasbor yang Hambar

Sesudah: Dasbor yang Brutal

Tips Pro untuk Desain Neobrutalis

Apa yang Harus Dilakukan Selanjutnya

Renungan Akhir

Cara Membangun Situs Neobrutalis dengan Tailwind CSS v4 (Langkah demi Langkah)

8 Pustaka Animasi React Terbaik pada 2026

20 Palet Warna Neobrutalisme dengan Kode Hex (Siap Salin & Tempel)

Cara Mengubah Proyek React Apa Pun ke Neobrutalisme dalam 10 Menit

Sebenarnya Apa Itu Neobrutalisme?

Kenapa Neobrutalism?

Langkah 1: Siapkan Proyek Anda (2 menit)

Langkah 2: Instal Neobrutalism (1 menit)

Langkah 3: Tambahkan Tema Neobrutalis (2 menit)

Langkah 4: Instal Komponen Pertama Anda (2 menit)

Langkah 5: Ganti Komponen Anda (2 menit)

Langkah 6: Tambahkan Font Neobrutalis (1 menit)

Langkah 7: Perhalus dan Sesuaikan (Opsional)

Sebelum dan Sesudah: Transformasinya

Sebelum: Aplikasi React Generik

Sesudah: Rombakan Neobrutalis

Contoh Lain: Widget Dasbor

Sebelum: Dasbor yang Hambar

Sesudah: Dasbor yang Brutal

Tips Pro untuk Desain Neobrutalis

Apa yang Harus Dilakukan Selanjutnya

Renungan Akhir

Lanjutkan membaca

Cara Membangun Situs Neobrutalis dengan Tailwind CSS v4 (Langkah demi Langkah)

8 Pustaka Animasi React Terbaik pada 2026

20 Palet Warna Neobrutalisme dengan Kode Hex (Siap Salin & Tempel)