İçeriğe atla
1.6k

Introduction

Neobrütalizm nedir ve Neobrutalism.com tasarım sistemi bunu React'a nasıl yansıtıyor? — shadcn CLI için açık kaynaklı bileşenler, bloklar ve şablonlar.

Neobrütalizm nedir?

Neobrütalizm, düz ve minimalist tasarımların tekdüzeliğine bir tepki olarak 2010’ların sonlarında ortaya çıkan bir web tasarım stilidir. Brutalist mimarinin hamlığı — doğal malzemeler, görünür yapı — bu stilde cesur renkler ve eğlenceli geometrik şekillerle ekrana yansıtılır.

Bunu beş özellikten tanıyabilirsiniz:

  • Kalın kenarlıklar — her öğenin çevresi, genellikle düz siyah renkle çerçevelenmiştir.
  • Keskin gölgeler — bulanıklık içermeyen düz ofsetler; böylece öğeler sayfada fiziksel olarak üst üste yığılmış gibi görünür.
  • Canlı renkler — yüksek kontrastlı, doygun dolgu renkleri. Gradyan yok, cam efektli tasarım yok.
  • Kare köşeler ve kalın yazı tipi — alanı dolgunlaştıran, ondan özür dilemeyen bir geometri.
  • Dokunsal etkileşim — düğmeler tıklandığında gölgelerinin içine gözle görülür şekilde çöküyor.

Hiçbir şey havada asılı kalmaz, hiçbir şey bulanıklaşmaz, hiçbir şey gizlenmez.Gumroad’in 2021’deki yeniden tasarım çalışması bu stili yaygınlaştırdı; bugün ise varsayılan görünüm yerine özenle tasarlanmış bir görünüm sunmak isteyen ürünler için ilk tercih haline geldi.

Neobrutalism.com nedir?

Neobrutalism.com React sitesine stil katan bir tasarım sistemidir — shadcn/ui ile aynı kayıt modeli üzerine kurulmuştur. Herhangi bir paket yüklemeniz gerekmez: shadcn CLI adresindeki komut, her bir bileşenin kaynak kodunu projenize kopyalar ve o andan itibaren bu kod size aittir.

İçindekiler:

  • Bileşenler — tek bir tasarım şablonuna göre düzenlenmiş tam set; böylece kenarlıklar, gölgeler ve yazı tipleri birbiriyle uyumludur.
  • Bloklar — hazır bölümler: kahramanlar, fiyat tabloları, oturum açma ekranları, kontrol panelleri.
  • Şablonlar — hazır web siteleri ve yönetici panelleri.
  • Temalar — paylaşılabilir ön ayarları olan bir tema oluşturucu.
  • Figma kit — tasarımcılar için de aynı sistem.
  • MCP sunucu — Claude Code ve Cursor gibi yapay zeka editörleri, bileşenleri adlarına göre ekleyebilir.

İki temel öğe, tek bir stil

Her bileşen iki farklı sürümde sunulur. Kurulum sırasında bileşen başına seçim yapabilirsiniz — hangi sürümü alacağınız, kurulum URL’sine göre belirlenir:

  • Radix UI — çoğu shadcn projesinin halihazırda üzerinde çalıştığı temel bileşenler.
  • Base UI — Radix + MUI ekibinin geliştirdiği yeni temel öğeler.

Aynı görünüm, aynı dışa aktarımlar, aynı API. Erişilebilirlik — odaklanma, klavye, ekran okuyucular — altta yatan temel öğelerden kaynaklanmaktadır.

Bir deneyin

Tek bir komut, ayar gerektirmez:

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

Ardından, yazı tipleri ve tema belirteçleri için “Kurulum” bölümüne geçin ya da önce bileşenlere göz atın.