Geçen sonbahar, Kadıköy’de küçük bir ürün ekibiyle otururken aynı tartışma yine açıldı: “Bu arayuz isini MUI ile mi cozelim, yoksa daha hafif bir şey mi kuralim?” Masada kahveler sogudu, konu uzadı gitti. Ben de o sırada şunu dusundum: asıl mesele hangi kutuphaneyi sectigimiz değil, arayuzun ne kadarini gerçekten bizim kontrol ettigimizdi. Isin garip tarafı, shadcn/ui tam burada hem tuhaf hem de bayağı iş görüyor.
Şimdi açık konuşayım; shadcn/ui klasik anlamda “kur ve kullan” tipi bir paket gibi davranmiyor. Hani npm’den indirip kenara cekildiginiz o eski aliskanlik var ya… burada isler öyle yurumu yor. Bileşeni projeye aliyorsunuz, dosya sizin oluyor, sonra caniniz nasıl isterse öyle kurcaliyorsunuz. Ilk bakışta biraz ters geliyor. Sonra fark ediyorsunuz ki rahatlatici olan da bu.
Neden herkes ayni konuyu konuşuyor?
Shadcn/ui’nin populerligi biraz da teknoloji dunyasinin uzun suredir tasidigi bir sikintiya dokunmasindan geliyor: bileşen kutuphaneleri çoğunlukla sizi hizlandirirken bir yandan da bagliyor. Evet, ilk hafta sahane gorunuyorlar. Ama iki ay sonra tema değiştirmek istersiniz, üç ay sonra ozel davranis eklersiniz, alti ay sonra sürüm güncellemesi gelir. Yarim gununuz gider. Tanidik geldi mi? Bana fazlasiyla.
Bakın, burayı atlarsanız yazının kalanı anlamsız kalır.
Ben bunu ilk kez 2024’un başında Besiktas’taki bir SaaS projesinde net bicimde gördüm. Tasarimci arkadasimiz butonlarin kosesini biraz daha yumusatmak istedi; normalde küçük görünen bu değişiklik başka sistemlerde neredeyse mini proje olurdu. Burada ise ilgili dosyayi acip duzeltmek yeterliydi (ciddiyim). O an kafamda ampul yandi: “Tamam,” dedim, “bu başka.”
Yani, Isin ozu su: shadcn/ui size hazir kutu vermiyor; parcalari veriyor. Bir lego seti gibi düşünün ama kutunun kapagi kilitli değil — parcalar masanin üstünde duruyor ve siz hangisini nereye koyacaginiza karar veriyorsunuz.
Klasik kutuphane mantigindan farki ne?
Mantik çok basit görünüyor ama etkisi büyük (buna dikkat edin). Geleneksel yapilarda komponentleri dis paketten import edersiniz; sürüm gelir, bagimlilik gelir, bazen de ufak bir API degisikligi olur ve zincirleme sorun cikar (ciddiyim). shadcn/ui’de ise komponentler doğrudan proje klasorunuze kopyalaniyor. Yani kod sizin repo’nuzda yasiyor.
Bunun pratik karsiligi su: gelistirici olarak “paketin sınırları” içinde dusunmek zorunda kalmiyorsunuz. Istediginiz yerde değişiklik yapabiliyorsunuz; custom variant ekliyorsunuz, spacing’i oynuyorsunuz, hatta bazı yerlerde neredeyse tamamen farklı davranis yaziyorsunuz. YouTube TV’de 90 Saniyelik Reklam Şoku: İşler Karıştı yazımızda bu konuya da değinmiştik.
npx shadcn@latest init
npx shadcn@latest add button
npx shadcn@latest add dialog
npx shadcn@latest add dropdown-menuNeden bana göre isliyor?
Bir kere sürüm derdi azalıyor. Bakın şimdi… MUI veya Chakra tarafında sürüm gecisi bazen tatli bela gibi gelir; kâğıt üstünde güncelleme yaparsiniz ama gerçek hayatta kirilan stillerle ugrasi rsiniz. ShadCN tarafında ise o bagimlilik baskisi hissedilmiyor çünkü kod zaten sizde duruyor.
E tabi bunun güzel tarafı kadar eksik yani da var: otomatik güncelleme rahatlgi azalıyor. Yani paket kendiliginden sizi itip kakmiyor; sorumluluk size geciyor. Bu iyi mi kötü mu? Küçük ekipte bence iyi bile sayilir çünkü karar hizi artıyor ama kurumsal tarafta disiplin sart oluyor.
Ve işler burada ilginçleşiyor.
Şunu söyleyeyim, Editor masasinda bu yaziyi hazirlarken ben de eski notlari karistirdim; Nisan 2025’te Ankara’da yaptığım bir demo uygulamada sadece üç component ekleyerek taslak ekrani ayaga kaldirmistik: button, dialog. Form parcalari… Gerçekten hizliydi ama sonrasinda erisilebilirlik detaylarini elden gecirmek gerektigi için biraz ter dokduk (hani her şey gulluk gulistanlik olmuyor).
| Kriter | shadcn/ui | Klasik UI Kutuphanesi |
|---|---|---|
| Sahiplik | Kod sizde | Kod pakette |
| Güncelleme baskisi | Daha dusuk | Daha yüksek olabilir |
| Ozellestirme | Duz dosya duzenleme ile kolay | Tema/override mekanizmasina bağlı |
| Agirlik kontrolü | Kullandigin kadar parca | Paket mimarisine bağlı olur |
| Ekip disiplini ihtiyacı | Daha yüksek olabilir | Daha standart akis sunar} |
No lock-in meselesi neden önemli?
No lock-in lafini pazarlama cumlesi gibi okumayin; gunluk iste karsiligi baya somut oluyor. Bir musteri toplantisinda tasarim dili degisirsa gidip tema ayariyla oyalanmiyorsunuz, ilgili component dosyasina giriyorsunuz. Işi hallediyorsunuz. PR Açıklaması Nasıl Yazılır: Doğal ve Net Dursun yazımızda bu konuya da değinmiştik.
Küçük bir detay: Buna karsilik büyük ekiplerde kontrolsuzluk riski de var tabii ki. Eğer herkes component dosyalarini kafasina göre oynarsa kısa surede küçük mutasyonlar başlıyor — bugun border radius degisir, yarin renk sistemi kayar… Sonunda tasarim dili yamali bohcaya dönüyor. Razor 1911: 40 Yıllık Dijital İsyan ve Demo Efsanesi yazımızda bu konuya da değinmiştik.
Hangi bileşenler en çok is görüyor?
Acil soyleyeyim, her projede her şeyi kurmaya gerek yok! Zaten güzel taraflarindan biri de bu secicilik hissi veriyor olmasidir. Ilk etapta ben genelde button, input+label ikilisiyle başlarım; ardından dialog ve dropdown-menu gelir. Bunlar temel taslar çünkü urunun yuzde sekseni oralardan akar gider.
- Button: Temel ama kritik; varyant yönetimi rahat.
- Input + Label: Formlarin omurgası gibi çalışır.
- Dialog: Modal akislarinda fazla kavga cikarmadan ilerler.
- Select:, yani kullanmasi daha dogal hissettirir (özellikle ozellestirilmis select’lerde). (bu kritik)
Küçük startup ile enterprise arasinda fark nerede?
Küçük startup için avantaj belli: hizli prototip cikarirsiniz, UI kararlarini erken test edersiniz. Gereksiz paket yukune girmezsiniz. Urun-pazar uyumu ararken bu ciddi konfor sagliyor.
Ama enterprise seviyede durum biraz daha cetrefilli.
Orada tek tek component sahibi olmak kulağa hos geliyor fakat design system governance yoksa kaos cikabilir.
Yani evet… ozgurluk güzel ama kurumsal duzen olmayinca ozgurluk bazen gurultuye donusuyor.
Peki eksileri yok mu? Var tabii!
Bana göre en büyük eksi su:
Her şey sizin repo’nuzda olduğu için bakim yuku de size kaliyor.
Kulağa romantik gelebilir ama besinci sprintten sonra insan şunu soruyor:
“Bu file’a kim ne yapti?”
İşte orada disiplin devreye giriyor.
” Honda’nın Çin Şoku: Bir CEO’nun İtirafı Ne Anlama Geliyor? yazımızda da bu konuya değinmiştik. Netflix’in Türkiye’deki Yeni Oyuncu Çağrısı: Şans, Set ve Basketbol yazımızda da bu konuya değinmiştik.
shadcn/ui hizli hissettiriyor çünkü size hazir siyah kutu vermek yerine duzenlenebilir yapı sunuyor… ama bunun bedeli ekip disiplinidir.
“
“Bir de şunu dürüstçe söylemem lazım:
Bazı projelerde “kendi component’in olsun” fikri bekledigim kadar puruzsuz gitmedi.
Özellikle acele teslim edilen dashboard işlerinde insanlar önce hız istiyor;
sonra accessibility konusu pat diye kapiya dayaniyor.
O noktada güzel gorunum yetmiyor.”
“
“Ne zaman tercih etmeliyim?” sorusunun kısa cevabı
“”Eğer React + Tailwind hattindaysaniz,
tasarim uzerinde ciddi soz hakkiniz varsa
ve komponentleri kendi ellerinizle sekillendirmek istiyorsaniz
shadcn/ui baya iyi secenek.
“Açık konuşayım,
ben bunu her projeye korlemesine koymam.
Mesela icerde agir kurumsal UI standardi olan,
çok sayıda ekip tarafindan kullanilan platformlarda önce tasarim sistemi oturturum,
sonra shadcn/ui parcalarini kontrollu şekilde alirim.”
“”
“Ha bu arada küçük ekiplerde tam tersi calisabilir:
önce hizlica birkac kritik component alinır,
urunun dili olusur,
sonra ihtiyac oldukça genisletilir.
Bu akis bana daha mantıklı geliyor.”
” (kendi tecrübem)
“
Sıkça Sorulan Sorular
>shardCN ui ücretsiz mi?
”
“”Evet,
tamamen ücretsiz kullanılabiliyor.
Kodlarınızı kendi projenize aldığınız için lisans tarafı da oldukça rahat ilerliyor.”
“”
”
?MUI yerine neden shadcN/UI seçeyim?”
“Daha fazla sahiplik,
daha az framework kavgası ve daha hafif hissettirmesi yüzünden tercih ediliyor.
Ama hazır enterprise özelliklerini hemen beklememek lazım.”
“
”
?Yeni başlayan biri için uygun mu?”
”
“”Eğer React ve Tailwind konusunda temel bilginiz varsa evet,
gayet uygun.
Hiç bilmeyene ise başlangıçta biraz farklı gelebilir çünkü yapı klasik paket mantığından ayrılıyor.”
“”
”
?Performansa katkısı olur mu?”
“Doğrudan mucize yaratmaz,
ama yalnızca kullandığınız component’leri aldığınız için gereksiz ağırlığı azaltmaya yardımcı olabilir.
Asıl kazanç genelde mimari esneklikten geliyor.”
”
“
”
“”Evet,
tamamen ücretsiz kullanılabiliyor.
Kodlarınızı kendi projenize aldığınız için lisans tarafı da oldukça rahat ilerliyor.”
“”
”
?MUI yerine neden shadcN/UI seçeyim?”
“Daha fazla sahiplik,
daha az framework kavgası ve daha hafif hissettirmesi yüzünden tercih ediliyor.
Ama hazır enterprise özelliklerini hemen beklememek lazım.”
“
”
?Yeni başlayan biri için uygun mu?”
”
“”Eğer React ve Tailwind konusunda temel bilginiz varsa evet,
gayet uygun.
Hiç bilmeyene ise başlangıçta biraz farklı gelebilir çünkü yapı klasik paket mantığından ayrılıyor.”
“”
”
?Performansa katkısı olur mu?”
“Doğrudan mucize yaratmaz,
ama yalnızca kullandığınız component’leri aldığınız için gereksiz ağırlığı azaltmaya yardımcı olabilir.
Asıl kazanç genelde mimari esneklikten geliyor.”
”
“
20+ yıl deneyimli Azure Solutions Architect. Microsoft sertifikalı bulut mimari ve DevOps danışmanı. Azure, yapay zekâ ve bulut teknolojileri üzerine Türkçe teknik içerikler üretiyor.
İlgili Yazılar
Bu içerik işinize yaradı mı?
Benzer içerikleri kaçırmamak için beni sosyal medyada takip edin.
