İçeriğe atla
1.6k

Installation

Tek bir shadcn CLI komutuyla neobrütalist React bileşenleri kurun — paket yok, yapılandırma yok. Karakteristik görünümün arkasındaki yazı tipleri ve Tailwind v4 token'ları da dahil.

Neobrutalism.com shadcnsi (CLI) için bir kayıt sistemidir. Yüklemeniz gereken bir paket ya da uygulamanızı içine almanız gereken bir sağlayıcı yoktur — CLI, her bir bileşenin kaynak kodunu neobrutalism.com adresinden projenize kopyalar ve o andan itibaren kod sizin olur.

Kurulum üç adımdan oluşuyor ve yaklaşık beş dakika sürüyor:

  1. Bir bileşeni yükleyin — tek komut, sıfır yapılandırma.
  2. Yazı tiplerini ekleyin — başlıklar için Archivo Black, gövde metni için Space Grotesk.
  3. Tema öğelerini ekleyin — yani, onu neobrütalizm yapan kenarlıklar, gölgeler ve renk paleti.

Bir bileşeni yükleyin

Her bileşen, Base UI ve Radix UIolmak üzere iki farklı sürümde sunulmaktadır. Hangi sürümü alacağınız, kurulum URL’sine göre belirlenir:

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

Kurulum süreci işte bu kadar. button adresini herhangi bir bileşenle değiştirin — şablon her zaman https://neobrutalism.com/r/<base|radix>/<component>.json şeklindedir ve her bileşen sayfasında her iki varyant için de tam komut gösterilir.

Yazı tiplerini ekleyin

Başlıklar Archivo Black dosyasında, ana metin ise Space Grotesk dosyasında tanımlanmıştır. Next.js ile bunları next/font/google adresinden yükleyin:

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

Temayı ekle

Bu öğeleri globals.css dosyanıza ekleyin. Keskin gölgeler ve --radius: 0 öğeleri işin büyük kısmını hallediyor — geri kalanı ise renk paletiyle ilgili ve bunların hepsi daha sonra değiştirebileceğiniz standart Tailwind v4 tema öğeleridir:

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

Yeni bir proje mi başlatıyorsunuz?

Çerçeve kılavuzları, ilk komuttan itibaren her şeyi adım adım anlatır:

  • Next.js — create-next-app, başlatma, yazı tipleri, tema, ilk bileşen.
  • Vite — Tailwind, yol takma adları, başlatma, ilk bileşen.

Yüklemeden önce önizleme yapın

Terminal üzerinden herhangi bir bileşenin kaynak kodunu inceleyin:

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

Kayıt defteri ad alanları (isteğe bağlı)

Tam URL’ler her zaman ihtiyacınız olan tek şeydir. Ancak, bileşenleri adlandırılmış kayıt defterleri aracılığıyla çözümleyen MCPsunucusunu kuruyorsanız ya da CLI adresindeki search ve list komutlarını kullanmak istiyorsanız, components.json dosyanızda kayıt defterine bir takma ad atayın:

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

Takma ad ayarlandıktan sonra, CLI komutu kayıt defterinin tamamını tarayabilir:

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

Tek depo

CLI’i -c / --cwd adresindeki doğru çalışma alanına yönlendirin:

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

Yardıma mı ihtiyacınız var?

Bir konuda takıldınız mı? Discord kanalımız aktif — gelin merhaba deyin.