Lewati ke konten
1.6k

Installation

Pasang komponen React bergaya neobrutalisme dengan satu perintah shadcn CLI — tanpa paket, tanpa konfigurasi. Termasuk font dan token Tailwind v4 di balik tampilan khasnya.

Neobrutalism.com adalah repositori untuk proyek "shadcn" (CLI). Tidak ada paket yang perlu diinstal dan tidak ada penyedia yang perlu digunakan untuk membungkus aplikasi Anda — skrip CLI menyalin kode sumber setiap komponen dari neobrutalism.com ke dalam proyek Anda, dan mulai saat itu, kode tersebut menjadi milik Anda.

Proses penyiapan terdiri dari tiga langkah, memakan waktu sekitar lima menit:

  1. Pasang komponen — satu perintah, tanpa konfigurasi.
  2. Tambahkan font berikut — Archivo Black untuk judul, Space Grotesk untuk teks utama.
  3. Tambahkan elemen-elemen khas tema tersebut — garis tepi, bayangan, dan palet warna yang membuatnya bercorak neobrutalisme.

Pasang sebuah komponen

Setiap komponen tersedia dalam dua varian, Base UI dan Radix UI. URL instalasi menentukan varian mana yang akan Anda dapatkan:

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
pnpm dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
npx shadcn@latest add https://neobrutalism.com/r/radix/button.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/radix/button.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/radix/button.json

Itulah seluk-beluk proses instalasinya. Ganti button dengan komponen apa pun — polanya selalu https://neobrutalism.com/r/<base|radix>/<component>.json, dan setiap halaman komponen menampilkan perintah yang tepat untuk kedua varian tersebut.

Tambahkan font-font tersebut

Judul ditulis dengan font Archivo Black, sedangkan teks utama menggunakan Space Grotesk. Dengan Next.js, muat font-font tersebut dari next/font/google:

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"],
  variable: "--font-sans",
  display: "swap",
})
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={`${archivoBlack.variable} ${spaceGrotesk.variable}`}>
        {children}
      </body>
    </html>
  )
}

Tambahkan tema

Masukkan token-token ini ke dalam globals.css Anda. Bayangan dengan offset yang tegas dan --radius: 0 sudah menangani sebagian besar pekerjaan — sisanya adalah palet warna, dan semuanya merupakan tema Tailwind v4 standar yang dapat Anda ubah nanti:

globals.css
@import "tailwindcss";
 
@theme inline {
  --font-head: var(--font-head);
  --font-sans: var(--font-sans);
  --radius: var(--radius);
 
  --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-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-primary-hover: var(--primary-hover);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
}
 
:root {
  --radius: 0;
  --background: #fff7e8;
  --foreground: #000;
  --card: #fff;
  --card-foreground: #000;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #000;
  --secondary-foreground: #fff;
  --muted: #efe7d6;
  --muted-foreground: #6b6355;
  --accent: #ffe7a3;
  --accent-foreground: #000;
  --destructive: #e63946;
  --destructive-foreground: #fff;
  --border: #000;
  --input: #fff;
  --ring: #000;
}
 
.dark {
  --background: #1a1815;
  --foreground: #f5f0e6;
  --card: #262320;
  --card-foreground: #f5f0e6;
  --primary: #ffdc58;
  --primary-hover: #ffd12e;
  --primary-foreground: #000;
  --secondary: #3a352f;
  --secondary-foreground: #f5f0e6;
  --muted: #2e2a24;
  --muted-foreground: #b3ac9e;
  --accent: #38342b;
  --accent-foreground: #f5f0e6;
  --destructive: #ff6b6b;
  --destructive-foreground: #1a1815;
  --border: #000;
  --input: #262320;
  --ring: #ffdc58;
}

Mau memulai proyek baru?

Panduan kerangka kerja ini menjelaskan semuanya mulai dari perintah pertama:

  • Next.js — create-next-app, inisialisasi, font, tema, komponen pertama.
  • Vite — Tailwind, alias jalur, inisialisasi, komponen pertama.

Lihat pratinjau sebelum menginstal

Periksa kode sumber komponen apa pun dari terminal:

pnpm dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
npx shadcn@latest view https://neobrutalism.com/r/base/button.json
yarn dlx shadcn@latest view https://neobrutalism.com/r/base/button.json
bunx --bun shadcn@latest view https://neobrutalism.com/r/base/button.json

Ruang nama registri (opsional)

URL lengkap adalah satu-satunya yang Anda butuhkan. Namun, jika Anda sedang mengonfigurasi server MCP — yang menerjemahkan komponen melalui registri bernama — atau ingin menggunakan perintah search dan list dari CLI, buatlah alias untuk registri tersebut di berkas components.json Anda:

components.json
{
  "registries": {
    "@neobrutalism": "https://neobrutalism.com/r/radix/{name}.json",
    "@neobrutalism-base": "https://neobrutalism.com/r/base/{name}.json"
  }
}

Setelah alias tersebut diterapkan, perintah CLI dapat menjelajahi seluruh registri:

pnpm dlx shadcn@latest search @neobrutalism
npx shadcn@latest search @neobrutalism
yarn dlx shadcn@latest search @neobrutalism
bunx --bun shadcn@latest search @neobrutalism
pnpm dlx shadcn@latest list @neobrutalism
npx shadcn@latest list @neobrutalism
yarn dlx shadcn@latest list @neobrutalism
bunx --bun shadcn@latest list @neobrutalism

Monorepo

Arahkan CLI ke ruang kerja yang tepat melalui -c / --cwd:

pnpm dlx shadcn@latest init -c ./apps/web
npx shadcn@latest init -c ./apps/web
yarn dlx shadcn@latest init -c ./apps/web
bunx --bun shadcn@latest init -c ./apps/web
pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
npx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/button.json -c ./apps/web

Butuh bantuan?

Ada yang bikin bingung? Server Discord kami aktif — mampir saja dan sapa kami.