React UI kütüphanesi seçimi: 2026'da hangi durumda hangisi?

"En iyi React UI kütüphanesi hangisi?" sorusunun cevabı yok, çünkü soru yanlış. Doğru soru şu: projeyi kim, ne kadar süre, hangi kısıtlarla sürdürecek? Üç haftada teslim edilecek bir yönetim paneliyle beş yıl yaşayacak bir ürünün cevabı aynı değil.

Bu yazı 2026 itibarıyla güncel rakamlarla başlıyor, sonra seçimi belirleyen iki gerçek ayrımı anlatıyor: sahiplik modeli ve Server Components sınırı.

Önce tablo

2 Eylül 2026 itibarıyla npm kayıt defterinden:

Bu tablonun en çarpıcı satırı ilki. Radix'in tek bir bileşeni, bütün "hazır" kütüphanelerin toplamından daha fazla indiriliyor. Sebebi şu: Radix bir kütüphane değil, başsız (headless) bir davranış katmanı — görünüm getirmiyor, yalnız erişilebilirlik ve klavye davranışını çözüyor. shadcn/ui de dahil pek çok şey onun üstüne kuruluyor.

Yani pazar "hazır bileşen paketi kur" modelinden "davranışı hazır al, görünümü kendin yaz" modeline kaymış durumda. Seçimini yaparken asıl ayrım bu.

Ayrım 1: Bağımlılık mı, sahiplik mi?

İkisinin de bedeli var ve bedel projenin ömrüne göre değişiyor:

• Bağımlılık modeli hızlı başlatır. Bedeli, tasarımın kütüphanenin izin verdiği kadar özgün olabilmesi. Tema sisteminin dışına çıkmak istediğin an !important savaşına giriyorsun.
• Sahiplik modeli özgür bırakır ama başlangıç yükü daha ağır ve bakım tamamen sende. Buna karşılık kütüphanenin büyük sürüm geçişi seni ilgilendirmiyor.

Aynı riskin başka bir yüzü Mantine'de: v9 artık react: ^19.2.0 istiyor. React sürümünü yükseltemeyen bir projede kütüphaneyi de yükseltemiyorsun.

Ayrım 2: Server Components sınırı

Next.js App Router kullanıyorsan bu, seçimden daha çok mimariyi ilgilendiriyor.

Etkileşimli bileşenler — açılır menü, modal, sekme, form — durum tutuyor, olay dinliyor ve context kullanıyor. Bunların hepsi istemci bileşeni. Yani hangi kütüphaneyi seçersen seç, o bileşenleri kullandığın yer "use client" sınırının içinde kalıyor ve kodu tarayıcıya iniyor.

Beş seçenek, ne zaman doğru?

MUI (Material UI)

Haftada 10 milyondan fazla indirme ile en büyük tam kapsamlı kütüphane. Bileşen seti geniş, dokümantasyonu iyi, kurumsal dünyada tanınıyor.

• Doğru olduğu yer: İç kullanıma yönelik yönetim panelleri, tasarımın ayırt edici olmasının gerekmediği kurumsal uygulamalar, ekipte tasarımcı olmayan projeler.
• Yanlış olduğu yer: Marka kimliğinin öne çıkması gereken müşteriye dönük ürünler. MUI'yi Material Design'a benzemekten çıkarmak, sıfırdan yazmaktan daha çok emek istiyor.

Ant Design

Alibaba'nın kütüphanesi; veri yoğun ekranlarda çok güçlü. Tablo bileşeni tek başına pek çok kütüphanenin tamamından yetenekli: sanallaştırma, sütun sabitleme, filtreleme, dışa aktarma.

• Doğru olduğu yer: Büyük tablolar, karmaşık formlar, çok dilli ve RTL desteği gereken kurumsal paneller.
• Yanlış olduğu yer: Pazarlama siteleri ve küçük uygulamalar. Getirdiği ağırlığın karşılığını ancak veri yoğun ekranlarda alıyorsun.

Mantine

100'ün üzerinde bileşen ve — asıl değerli kısmı — kullanışlı kancalar (useForm, useDisclosure, useLocalStorage). Görünümü Material'a göre daha nötr, bu yüzden markalaştırması kolay.

• Doğru olduğu yer: Hızlı gitmek isteyip Material görünümü istemeyen projeler; form ağırlıklı uygulamalar.
• Dikkat: v9, React 19.2 ve üstünü zorunlu tutuyor.

Chakra UI

Erişilebilirlik ve geliştirici deneyimiyle isim yapmıştı. v3 ile Panda CSS + Ark UI üzerine yeniden yazıldı.

• Doğru olduğu yer: Yeni başlayan, v3 ile baştan kurulacak projeler.
• Dikkat: v2'de duran bir projeyi yükseltmek göç demek. Yeni bir işe başlarken bu geçişin ekosistemde henüz taze olduğunu hesaba kat.

shadcn/ui

Bir paket değil; Radix + Tailwind üzerine kurulu, projene kopyalanan bileşen koleksiyonu. Yukarıdaki tabloda görünmemesinin sebebi de bu — npm'den kurulmuyor.

• Doğru olduğu yer: Tasarımın ürünün bir parçası olduğu, uzun ömürlü projeler. Tailwind zaten kullanıyorsan sürtünmesi sıfıra yakın.
• Yanlış olduğu yer: Tailwind kullanmayan ekipler ve "kur ve geç" beklentisi olan kısa işler. Kopyalanan her bileşenin bakımı artık senin.

Karar tablosu

Son satır şaka değil: tanımadığın bir kütüphaneyi öğrenme süresi, çoğu kısa işte kütüphaneler arasındaki farktan büyük.

Ben ne kullanıyorum?

Şu an okuduğun sitede hiçbir UI kütüphanesi yok. Tailwind CSS v4, sınıf birleştirme için clsx ve class-variance-authority, ikon için lucide-react, hareket için motion — bileşenlerin tamamı elle yazıldı.

Bunu her projeye önermiyorum. Bu sitede işe yaramasının üç sebebi var:

1. Tasarım sistemi işin kendisi. Kısıtlar (tek vurgu rengi, saç teli kenarlık, 36px buton) bir kütüphanenin varsayılanlarıyla çelişiyor; onları bastırmak yazmaktan uzun sürerdi.
2. Bileşen sayısı az. Buton, rozet, kart, açılır menü. Bir tablo bileşeni yazmam gerekseydi karar başka olurdu.
3. Sürdüren tek kişi benim. Ekip büyüdüğünde ortak bir kütüphanenin dokümantasyonu, elle yazılmış bileşenlerin kabile bilgisinden değerli hâle geliyor.