Lewati ke konten
1.6k

Introduction

Apa itu neobrutalisme, dan bagaimana sistem desain Neobrutalism.com mengaplikasikannya ke React — komponen, blok, dan templat berkode terbuka untuk shadcn CLI.

Apa itu neobrutalisme?

Neobrutalisme adalah gaya desain web yang muncul pada akhir tahun 2010-an sebagai reaksi terhadap keseragaman desain datar dan minimalis. Gaya ini mengadopsi kesan kasar dari arsitektur brutalist — bahan yang apa adanya, struktur yang terlihat — dan menerjemahkannya ke dalam tampilan layar melalui warna-warna berani dan geometri yang dinamis.

Anda dapat mengenalinya dari lima ciri berikut:

  • Garis tepi tebal — setiap elemen diberi garis tepi, biasanya berwarna hitam pekat.
  • Bayangan tajam — pergeseran datar tanpa efek kabur, sehingga elemen-elemen tampak ditumpuk secara fisik di halaman.
  • Warna mencolok — pengisian warna dengan kontras tinggi dan saturasi tinggi. Tanpa gradien, tanpa efek glassmorphism.
  • Sudut-sudut yang tajam dan huruf tebal — geometri yang memanfaatkan ruang sepenuhnya, bukan malah menghindarinya.
  • Interaksi taktil — tombol-tombol tampak tertekan ke dalam bayangannya saat diklik.

Tak ada yang mengambang, tak ada yang kabur, tak ada yang tersembunyi. Perombakan desain yang dilakukan Gumroad pada tahun 2021 menjadikan gaya ini populer secara luas; kini, gaya ini menjadi pilihan utama bagi produk-produk yang ingin tampil dengan desain yang disengaja, bukan sekadar tampilan bawaan.

Apa itu Neobrutalism.com?

Neobrutalism.com adalah sistem desain yang menghadirkan gaya dari React — dibangun berdasarkan model registri yang sama dengan shadcn/ui. Anda tidak perlu menginstal paket apa pun: perintah shadcn CLI akan menyalin kode sumber setiap komponen ke dalam proyek Anda, dan mulai saat itu, kode tersebut menjadi milik Anda.

Isi:

  • Komponen — satu set lengkap, dirancang sesuai dengan satu gaya sehingga garis tepi, bayangan, dan tipografi saling selaras.
  • Blok — bagian siap pakai: profil tokoh, tabel harga, layar otentikasi, dasbor.
  • Template — situs lengkap dan panel admin.
  • Tema — pembuat tema dengan preset yang dapat dibagikan.
  • Figma kit — sistem yang sama untuk para desainer.
  • MCP server — Editor AI seperti Claude Code dan Cursor dapat menambahkan komponen berdasarkan namanya.

Dua bentuk dasar, satu gaya

Setiap komponen tersedia dalam dua varian. Pilih salah satu per komponen saat proses instalasi — URL instalasi akan menentukan varian mana yang akan Anda dapatkan:

  • Radix UI — tipe data dasar yang sudah digunakan oleh sebagian besar proyek shadcn.
  • Base UI — primitif-primitif terbaru dari tim Radix + MUI.

Tampilan yang sama, ekspor yang sama, API yang sama. Aksesibilitas — fokus, keyboard, pembaca layar — berasal dari elemen dasar di baliknya.

Coba saja

Satu perintah, tanpa konfigurasi:

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

Selanjutnya, buka bagian Instalasi untuk font dan token tema, atau telusuri komponen-komponennya terlebih dahulu.