1 Mayıs 2026
Herhangi Bir React Projesi 10 Dakikada Neobrütalizme Nasıl Dönüştürülür
Sıkıcı React uygulamanıza cesur bir görünüm mü kazandırmak istiyorsunuz? Neobrutalism ile herhangi bir React projesini yalnızca 10 dakikada çarpıcı bir neobrütalist tasarıma dönüştürmeyi öğrenin. Öncesi/sonrası örnekleriyle adım adım eğitim.
Dov Azencot
@DovAzencotDürüst olalım: React uygulamanız muhtemelen ortalıktaki diğer tüm React uygulamaları gibi görünüyor. Temiz mi? Elbette. Profesyonel mi? Kesinlikle. Akılda kalıcı mı? Yakınından bile geçmiyor.
Peki size, yalnızca 10 dakikada, sıradan görünen projenizi kişilik saçan bir şeye dönüştürebileceğinizi söylesem? İnsanlara "Vay, bu da NE?" dedirten bir şeye.
İşte neobrütalizmin gücü bu: cesur, tavizsiz ve göz ardı edilmesi imkânsız bir tasarım stili. Ve Neobrutalism ile React projenizi dönüştürmek gülünç derecede kolay.
Kahvenizi alın (ya da enerji içeceğinizi, yargı yok) ve o yavan uygulamayı biraz baharatlı bir şeye çevirelim.
Neobrütalizm de Nedir Aslında?
Dalmadan önce, ortak bir dilde buluşalım. Neobrütalizm, 1950'lerin ham, beton ağırlıklı brütalist mimarisinden ilham alan ve ona modern, dijital bir dokunuş katan bir tasarım hareketi.
Şunları düşünün:
- Her şeyde kalın siyah kenarlıklar
- Sert gölgeler (o yumuşak bulanıklık saçmalığı yok)
- Siyah, beyaz ve neon sarısı gibi yüksek kontrastlı renkler
- Sıfır yuvarlatılmış köşe (her şey keskin ve köşeli)
- Izgarayı bozan asimetrik düzenler
Bu, mükemmeliyetçilik karşıtlığı. Bu, asi. Bu, yönetim kurulu toplantısına deri ceketle gitmenin tasarımdaki karşılığı. Ve işe yarıyor.
Neden Neobrutalism?
Neobrütalist bileşenleri sıfırdan kurabilirsiniz, ama Neobrutalism varken tekerleği neden yeniden icat edesiniz? Bu, özellikle neobrütalizm için kurulmuş, React için bir UI kütüphanesi; şunlarla:
- O kendine has brütal estetiğe sahip hazır bileşenler
- CLI üzerinden kolay kurulum
- Tailwind CSS ile tam özelleştirme
- Next.js, Vite, Remix ile uyumlu; yani hemen hemen her React kurulumuyla
Ayrıca ücretsiz ve açık kaynak. Hadi başlayalım.
Adım 1: Projenizi Kurun (2 dakika)
İlk iş, ilk iş. Mevcut bir React projesiyle çalışıyorsanız, zaten öndesiniz. Değilse, hızlıca bir Next.js uygulaması ayağa kaldıralım (ama bu, herhangi bir React framework'üyle çalışır).
Sorulduğunda TypeScript ve Tailwind CSS'e evet deyin. İkisine de ihtiyacımız var.
Vite ya da Create React App kullanıyorsanız, o da harika: kurulum neredeyse aynı.
Adım 2: Neobrutalism'yi Kurun (1 dakika)
Şimdi sihre. shadcn'i başlatmamız (Neobrutalism arka planda ona dayanıyor) ve Neobrutalism yardımcı araçlarını kurmamız gerek.
Bu komutu çalıştırın:
Birkaç soru çıkacak. Seçmeniz gerekenler şunlar:
- Style: Default
- Base color: Slate (pek önemli değil, zaten üzerine yazacağız)
- CSS variables: Yes
Ardından Neobrutalism utils'ini kurun:
Bitti. Hepsi bu. Artık brütalist arayüzler kurmak için temeliniz var.
Adım 3: Neobrütalist Temayı Ekleyin (2 dakika)
Dönüşüm asıl burada başlıyor. global.css dosyanızı açın (genellikle app/globals.css veya src/index.css içinde) ve tema değişkenlerini Neobrutalism'nin kendine has brütal temasıyla değiştirin.
Bunu CSS'inize yapıştırın:
@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;
}Ne oldu?
- Tüm border-radius'ları kaldırdık (artık yuvarlatılmış köşe yok)
- Yumuşak gölgeleri sert, kaydırmalı gölgelerle değiştirdik
- Cesur bir siyah/beyaz/sarı renk şeması kurduk
- Karanlık mod desteği ekledik (çünkü barbar değiliz)
Uygulamanız çoktan farklı görünmeye başladı. Ama daha bitmedi.
Adım 4: İlk Bileşenlerinizi Kurun (2 dakika)
Birkaç gerçek bileşen alalım. Temel olanlarla başlayacağız: Button, Card ve Input.
Bu komutları tek tek çalıştırın:
Her bileşen components/neobrutalism/ klasörünüze, kullanıma hazır biçimde eklenir. Tek satır CSS yazmanıza gerek yok.
Adım 5: Bileşenlerinizi Değiştirin (2 dakika)
Şimdi eğlenceli kısım geliyor: eski, sıkıcı bileşenlerinizi yenileri, brütal olanlarla değiştirmek.
Öncesi:
// Your old, generic button
<button className="bg-blue-500 text-white px-4 py-2 rounded">
Click Me
</button>Sonrası:
import { Button } from "@/components/neobrutalism/Button";
<Button>Click Me</Button>Bir çırpıda, kalın siyah kenarlıkları, sert bir gölgesi ve o kendine has neobrütalist havası olan bir butonunuz oldu.
Aynısını bir kart için yapalım:
Öncesi:
<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>Sonrası:
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>Aynı yapı, tamamen farklı bir hava. Kartın artık keskin kenarları, kalın kenarlıkları ve onu sayfadan fırlatan sert bir gölgesi var.
Adım 6: Neobrütalist Fontları Ekleyin (1 dakika)
Neobrütalizmde tipografi ÇOK BÜYÜK. Varsayılan sistem fontları yetmez. Neobrutalism, başlıklar için Archivo Black, gövde metni için Space Grotesk öneriyor.
Next.js kullanıyorsanız, bunu app/layout.tsx dosyanıza ekleyin:
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>
);
}Artık başlıklarınız iri ve kalın, gövde metniniz ise temiz ve okunaklı kalıyor.
Adım 7: İnce Ayar ve Özelleştirme (İsteğe Bağlı)
Bu noktada esasen işiniz bitti, ama daha derinlemesine özelleştirmek isterseniz, Neobrutalism bunu kolaylaştırıyor.
Farklı bir vurgu rengi mi istiyorsunuz? CSS'inizde --primary değişkenini değiştirin.
:root {
--primary: #ff006e; /* Hot pink instead of yellow */
}Daha yumuşak gölgeler mi istiyorsunuz? Gölge değişkenlerini ayarlayın.
--shadow: 2px 2px 0 0 var(--border); /* Smaller offset */Daha fazla bileşen mi eklemek istiyorsunuz? neobrutalism.com/docs/components adresindeki tam kütüphaneye göz atın. Input'lar, badge'ler, diyaloglar, tablolar ve daha fazlası var; hepsi o brütal estetikle.
Öncesi ve Sonrası: Dönüşüm
Pekâlâ, farkı görelim. İşte basit bir açılış sayfasının neobrütalist dönüşümden önce ve sonra nasıl göründüğü.
Öncesi: Sıradan Bir React Uygulaması
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>
);
}Bunda yanlış olan ne?
Teknik olarak hiçbir şey. İşlevsel. Temiz. Ama aynı zamanda tamamen unutulabilir. Bunu 100 kişiye gösterseniz, bu hafta gördükleri bir düzine başka siteyle karıştırırlardı.
Sonrası: Neobrütalist Görünüm Değişikliği
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>
);
}Ne değişti?
- Arka plan: sıkıcı griden elektrik sarısına geçti
- Tipografi: Archivo Black ile kalın, büyük harf bir başlık
- Kenarlıklar: her şeyin kalın siyah kenarlıkları var
- Gölgeler: yumuşak bulanıklıklar yerine sert ve kaydırmalı
- Köşeler: sıfır border-radius, keskin ve köşeli
- Hava: "kurumsal broşür"den "karakterli bağımsız girişim"e
Aynı bileşen yapısı, aynı düzen, ama his tamamen farklı. İnsanlar bunu hatırlayacak.
Başka Bir Örnek: Pano Widget'ı
Daha karmaşık bir örneğe bakalım: bir pano istatistik kartı.
Öncesi: Yavan Bir Pano
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>
);
}Sonrası: Brütal Bir Pano
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>
);
}Ne farklı?
- Renk bloklama: her kartın kendine ait bir arka planı var (sarı, beyaz, siyah)
- Kalın tipografi: sayılar dev ve display fontunu kullanıyor
- Yüksek kontrast: siyah üzerine beyaz metin anında görsel hiyerarşi yaratıyor
- Büyük harf etiketler: her şeyi daha kasıtlı ve kalın hissettiriyor
- Renk yerine oklar: netlik için ▲ ve ▼ sembollerini kullanıyor
Aynı veri, çarpıcı biçimde farklı bir sunum. Brütal sürüm kendinden emin ve tasarlanmış hissettiriyor, sadece bir araya getirilmiş değil.
Neobrütalist Tasarım İçin Profesyonel İpuçları
Artık temelleri kaptığınıza göre, estetiği gerçekten yakalamak için birkaç ipucu:
1. Asimetriyi Kucaklayın
Izgarayı bozmaktan korkmayın. Öğeleri kaydırın, kenarlıkları üst üste bindirin, bırakın her şey düzensizce nefes alsın. Mükemmellik sıkıcıdır.
2. Rengi Kasıtla Kullanın
Neobrütalizm yüksek kontrastlı renk kombinasyonlarını sever. Temel olarak siyah ve beyaz, sonra bir ya da iki vurgu rengi ekleyin (sarı, pembe, camgöbeği). Gökkuşağına dönmeyin: bir hava seçin ve ona bağlanın.
3. Tipografide Büyük Düşünün
Başlıklar DEV olmalı. Gövde metni normal olabilir, ama H1'leriniz dikkat çekmeli. Bir mesaj vermek istediğinizde kalın, büyük harfler kullanın.
4. Mikro Etkileşimler Ekleyin
Brütal, durağan demek değildir. Butonların hafifçe kaydığı ya da gölgelerin büyüdüğü hover efektleri ekleyin. İnce ama fark edilir tutun.
<Button className="hover:translate-x-1 hover:translate-y-1 transition-transform">
Click Me
</Button>5. Aşırıya Kaçmayın
Her öğeye kalın bir kenarlık gerekmez. Her bölüme parlak bir arka plan gerekmez. Denge hâlâ önemli, sadece cesaret yönüne eğik.
Bundan Sonra Ne Yapmalı
Tebrikler. Az önce React projenize yaklaşık 10 dakikada eksiksiz bir görsel yenileme yaptınız. Buradan neler yapabileceğiniz:
Daha Fazla Bileşen Keşfedin
Neobrutalism'nin tam bir bileşen kütüphanesi var: badge'ler, diyaloglar, tablolar, sekmeler ve daha fazlası. Bileşen dokümantasyonuna göz atın ve başka neler ekleyebileceğinizi görün.
Temanızı Özelleştirin
CSS değişkenleriyle oynayarak markanıza uydurun. Vurgu renklerini değiştirin, gölge yoğunluğunu ayarlayın ya da onu kendinize ait kılmak için boşlukları değiştirin.
Havalı Bir Şey Kurun
Artık uygulamanız sıradan görünmediğine göre, onu sergileyin. Twitter'da paylaşın, Reddit'te yayınlayın, portföyünüze ekleyin. Neobrütalizm dikkat çeker.
Topluluğa Katılın
Neobrutalism'nin, tasarımcılarla geliştiricilerin projeler paylaştığı, soru sorduğu ve brütal tasarım üzerine hararetle konuştuğu çok aktif bir Discord'u var. Uğrayın ve selam verin.
Son Düşünceler
Çoğu React uygulaması birbirine benzer, çünkü çoğu geliştirici aynı araçlara uzanır: Material UI, Bootstrap, varsayılan ayarlarıyla shadcn. Bunlarda yanlış bir şey yok (harikalar), ama öne çıkmanıza yardım etmezler.
Neobrütalizm, kişiliğe giden bir kestirme. Cesur, akılda kalıcı ve doğru araçlarla uygulaması şaşırtıcı derecede kolay. Neobrutalism, sıfırdan yeniden kurmadan geçiş yapmanız için ihtiyacınız olan her şeyi veriyor.
Yalnızca 10 dakikada, "bir React uygulaması daha"dan "dur, bu da NE?"ye geçtiniz. Ve açıkçası? Bu güçlü bir şey.
O yüzden devam edin: uygulamanızı göz ardı edilmesi imkânsız kılın.
Şimdi çıkın ortaya ve brütal bir şey kurun. 🚀