Shadcn/UI, varsayılanı Radix yerine Base UI olarak değiştiriyor

• shadcn/ui, Temmuz 2026’dan itibaren yeni projeler ve dokümanlardaki varsayılan akışı Base UI odaklı hale getiriyor; 2023’teki çıkışından beri süren Radix varsayılanından yön değiştiriyor
• Base UI, 1.6.0 kararlı sürüme ve haftada 6 milyondan fazla indirmeye ulaştı; shadcn/create projelerinde de Radix’e göre 2:1 oranında daha çok tercih ediliyor
• Radix için destek sonlandırılmıyor; mevcut uygulamalar olduğu gibi kalabilir ve yalnızca Base UI’da bulunan bileşenler hariç güncellemeler ile yeni bileşenler sunulmaya devam edecek
• Migrasyon codemod olarak değil, ajan skill’i olarak sunuluyor; değiştirilmiş bileşenleri ve kullanım yerlerini bileşen bazında kademeli olarak taşıyor, .migration/ raporu ve git commit’i bırakıyor
• Sohbet UI bileşenleri, GitHub deposu tabanlı registry, shadcn eject ve yeni stil Rhea da eklenerek shadcn/ui’nin kapsamı bileşen dağıtımından ürün UI’ı oluşturmaya kadar genişliyor

---

Base UI varsayılan bileşen kütüphanesi oluyor

• Temmuz 2026’dan itibaren Base UI, shadcn/ui’nin varsayılan bileşen kütüphanesi olarak belirlenecek
• shadcn/ui, Ocak 2023’te piyasaya çıktığında Radix temel alınarak oluşturulmuştu; o dönemde Radix, stilsiz headless bileşenler, API, erişilebilirlik ve gerçek uygulama kullanım deneyimi sunan bir seçenekti
• Base UI, Radix’i yapan kişiler tarafından yeni geliştirilen bir kütüphane; shadcn/ui mevcut soyutlamasını koruyarak tüm bileşenleri Base UI için yeniden oluşturdu
• Aralık 2025’te npx shadcn create içinde iki kütüphanenin de seçilebilmesi sağlandı; Ocak 2026’da ise Base UI dokümantasyonu tamamlandı

Varsayılanın değiştirilme nedeni

• Base UI’ın kararlılığı ve kullanım akışı

  • Base UI sürümü 1.6.0
  • Haftalık indirme sayısı 6 milyondan fazla
  • Base UI ekibi düzenli olarak yeni ve kullanışlı bileşenler yayımlıyor
  • shadcn/ui’nin yeni projeleri Base UI kullanıyor
  • shadcn/create ile oluşturulan projeler Base UI’ı Radix’e göre 2:1 oranında daha fazla seçiyor
  • shadcn/ui bu tercih akışını resmi varsayılan olarak yansıtıyor

Yeni projelerde ve dokümanlarda değişenler

• Yeni bir projede npx shadcn init çalıştırıldığında Base UI varsayılan seçenek olacak
• shadcn/create, Base UI’ı önce gösterecek
• Dokümanlardaki bileşen sayfaları varsayılan olarak Base UI sekmesini açacak; Radix dokümanlarına tek tıklamayla erişilebilecek

Radix kullanıcılarının bilmesi gerekenler

• Radix desteklenmeye devam edecek

  • shadcn/ui, Radix desteğini sürdürecek
  • Yalnızca Base UI’da bulunan bileşenler hariç tüm güncellemeler ve yeni bileşenler iki kütüphaneye de sunulacak
  • Mevcut uygulamalar için migrasyon gerekmiyor
  • Radix olgun ve test edilmiş bir kütüphane
  • shadcn/ui da Radix’i production’da kullanmaya devam ediyor ve kendi projelerini de taşımıyor
  • Yeni projelerde Radix’i tercih ediyorsanız flag kullanabilirsiniz
  • shadcn init komutunu etkileşimsiz çalıştıran script’ler veya CI Radix bekliyorsa mevcut yolu korumak için -b radix eklenmeli
  • Registry oluştururken belirli bir kütüphaneye sabitlemek istiyorsanız registry:base ayarı sağlayabilirsiniz
  • Bu ayarı olmayan öğeler artık Base UI ile başlatılacak
  • Yeni projeler için Base UI öneriliyor

Base UI’a geçiş yöntemi

• Migrasyon zorunlu değil; ancak istenirse skill kullanılabilir
• Kodlama ajanına şu şekilde istekte bulunulabilir
  • migrate accordion to base-ui
• Varsayılan yöntem kademeli migrasyondur
  • Bileşenler ve kullanım yerleri tek tek taşınır
  • Proje green durumda ve dağıtılabilir halde kalmaya devam eder
  • Çalışma sırasında iki kütüphane bir arada bulunur
  • Ortada durdurup daha sonra devam edebilirsiniz
  • İsterseniz tüm projeyi tek seferde de isteyebilirsiniz

Codemod yerine skill seçilme nedeni

• shadcn/ui bileşenleri kullanıcının sahip olduğu ve değiştirdiği kod olduğundan, codemod dokunulmamış bileşenlerde uygun olsa da değiştirilmiş bileşenlerde bozulabilir
• Skill içinde isim değişiklikleri, prop değişiklikleri ve davranış farkları iki kütüphane temelinde elle incelenmiş olarak yer alır
• Ajan, kullanıcının değiştirdiği kısımları anlar ve bu değişiklikleri taşınacak hedefe de yansıtır
• Mekanik olarak işlenebilen değişiklikler genelinde uygulanır
  • Örn: asChild, render olarak değişir
• Davranış değişiklikleri sessizce patch’lenmez, işaretlenir; nihai kararı kullanıcı verir

Migrasyonun bıraktığı çıktılar

• Her çalıştırma üç sonuç bırakır
  • Çalışan kod: Başarı raporundan önce typecheck ve build çalıştırılır
  • Bileşen bazlı rapor: Proje kökündeki .migration/ içine değişiklikler, dokunulmadan bırakılan kısımlar ve manuel kontrol checklist’i yazılır
  • Temiz git geçmişi: Branch üzerinde bileşen başına bir commit bırakılır; rollback için branch’i silmek yeterlidir
• Rapor örneği .migration/accordion.md olup şu bölümleri içerir
  • Changed
  • Left alone
  • Behavior changes
  • Verify by hand
• Gizli durum olmadan ilerleme dosyalarda ve git geçmişinde kaldığı için, herhangi bir ajan veya oturum çalışmaya devam edebilir
• Claude Code, Cursor ve skill destekleyen ajanlarda çalışır
• Gerçek proje testlerinde 60’tan fazla bileşenin 36’sı Radix’ti; tam migrasyon yaklaşık 25 dakika, bileşen başına yaklaşık 10 bin token ile tamamlandı
• Build temiz şekilde geçti ve özelleştirmeler korundu

Sohbet arayüzü için bileşenler eklendi

• Haziran 2026’da sohbet arayüzleri oluşturmak için yeni bileşenler eklendi
  • MessageScroller
  • Message
  • Bubble
  • Attachment
  • Marker
• İlk aşama, konuşma katmanını oluşturan temel parçalar
  • kaydırma
  • mesaj satırları
  • konuşma balonları
  • ekler
  • işaretçiler
• MessageScroller, konuşmalar için bir kaydırma container’ıdır
  • anchored turns
  • streamed replies
  • saved thread restore
  • prepended history
  • jump-to-message
  • scroll controls
  • visibility tracking’i işler
• MessageScroller; mesajların, yapay zeka durumunun, gönderimin, kaydetmenin veya model durumunun sahibi değildir; içerik renderer’ını kullanıcı sağlar
• MessageScroller, @shadcn/react içinde stilsiz headless bileşen olarak da sunulur

Message, Bubble, Attachment ve Marker’ın rolleri

• Message, konuşmadaki bir satırı yerleştirir
  • avatar
  • hizalama
  • header
  • içerik
  • footer
  • grup mesajlarını yönetir
• Bubble, mesaj yüzeyini render eder
  • variants
  • hizalama
  • reactions
  • links
  • buttons
  • collapsible content’i destekler
• Attachment, dosya ve görselleri render eder
  • media
  • metadata
  • upload state
  • actions
  • ayrı tıklanabilir action’ları koruyan full-card trigger sağlar
• Marker, durum güncellemelerini, sistem notlarını, kenarlıklı satırları ve etiket ayırıcılarını render eder
  • streaming state
  • tool activity
  • date breaks gibi amaçlarla kullanılır
• Bu bileşenler küçük tasarlanmıştır; yapay zeka sohbeti, support inbox, team thread, group chat ve ürüne özel konuşma UI’larında birleştirilebilir

Sohbet UI’ı için CSS utility’leri ve @shadcn/react

• İki yeni CSS utility’si eklendi
  • scroll-fade: kaydırma container’ının kenarlarına kaydırma algısı veren fade ekler
  • shimmer: "Thinking…", "Generating response…", araç çalıştırma ve streaming marker gibi canlı durum metinlerine shimmer ekler
• İki utility de shadcn/tailwind.css içinde bulunur
  • npx shadcn@latest init ile başlatılan projelerde zaten dahildir
• @shadcn/react, stilsiz headless React bileşenleri için yeni bir pakettir
  • İlk primitive @shadcn/react/message-scroller
  • Registry bileşeni bunu shadcn/ui stiliyle sarar; ancak anchoring, auto-follow, prepend preservation, scroll commands ve visibility gibi kaydırma davranışları paketin içindedir
• Bu yaklaşım, görsel stile bağlı kalmadan davranış sağlar ve zor etkileşim mantığının tek yerde test edilebilmesini mümkün kılar
• Hem Radix hem Base UI ile kullanılabilir

AI Elements ile ilişkisi

• Yeni sohbet bileşenleri AI Elements’ın yerine geçmez
• AI Elements’ın yapay zeka arayüz bileşenleri ve pattern’leri kullanılmaya devam edilebilir
• Bu sürüm, sohbetin temel parçalarını shadcn/ui’ye tek tek getirmeye odaklanıyor
• Halihazırda AI Elements bileşenleri kullanıyorsanız uygulamayı yeniden yazmanız gerekmez
• Daha yeni soyutlamalar, güncellenmiş stil veya Radix ile Base UI’ın ikisini de destekleme ihtiyacınız olduğunda shadcn/ui sürümünü deneyebilirsiniz

GitHub deposunu registry olarak kullanma

• Haziran 2026’dan itibaren açık GitHub depoları registry olarak kullanılabilir
• Depo köküne registry.json ekleyip dağıtılacak öğeleri tanımlarsanız kullanıcılar shadcn CLI ile doğrudan GitHub’dan kurulum yapabilir
• GitHub registry bir source registry’dir
  • shadcn build çalıştırmaya gerek yoktur
  • Üretilmiş item JSON dosyalarını publish etmeye gerek yoktur
  • Registry sunucusu kurmaya gerek yoktur
• CLI, kökteki registry.json dosyasını okur, include öğelerini yorumlar, istenen öğeyi bulur ve ilgili dosyaları kurar
• Registry öğeleri bileşenlerle sınırlı değildir
  • components
  • hooks
  • utilities
  • design tokens
  • feature kits
  • project conventions
  • agent instructions
  • testing setup
  • CI workflows
  • release workflows
  • templates
  • codemods
  • migration kits
  • diğer proje dosyaları dağıtılabilir
• GitHub registry adresleri mevcut registry adresleriyle aynı komutlarda çalışır
  • list
  • search
  • view
  • install

shadcn eject ve shadcn/tailwind.css

• Hem Radix hem Base UI desteklenirken iki kütüphanenin bağımlı olduğu ortak Tailwind utility’lerini koyacak bir yere ihtiyaç doğdu
  • Örn: data-open:, data-closed: gibi custom variant’lar
  • Örn: no-scrollbar gibi utility
• RTL desteği üzerinde çalışılırken bazı hataları tüm bileşenlerde tekrar tekrar uygulamak yerine tek yerde düzeltmek de daha kolaydı
• Bunun için shadcn/tailwind.css oluşturuldu
  • init çalıştırıldığında global CSS dosyasına @import "shadcn/tailwind.css" eklenir
  • tw-animate-css gibi bir CSS import’u gibi çalışır
  • Production’da tree-shake edilir ve build sırasında çözümlenen küçük bir bağımlılıktır
• shadcn paketinin CSS bağımlılığını istemiyorsanız shadcn eject kullanabilirsiniz
  • shadcn/tailwind.css global CSS dosyasına inline edilir
  • Projeden shadcn bağımlılığı kaldırılır
• Monorepo’da komut, components.json ve global CSS dosyasının bulunduğu workspace’te çalıştırılmalıdır

Yeni stil Rhea

• Mayıs 2026’da yeni shadcn/ui stili Rhea eklendi
• Rhea, daha compact bir Luma’dır; küçük spacing ve daha yoğun surface’lerle focused product interface için tasarlanmıştır
• Rhea, Luma’nın yumuşaklığını ve formunu korurken butonları, input’ları, menüleri, kartları ve listeleri daha sıkı yerleştirir
• Luma’nın --spacing değerini ayarlama yolu seçilmedi
  • --spacing bir multiplier olduğu için değiştirildiğinde uygulama genelinde p-2, w-4, m-16 gibi alışılmış Tailwind utility’lerinin anlamı değişir
• Rhea ayrı bir stil olarak sunulur; component size, gap ve density doğrudan ayarlanırken underlying utility scale öngörülebilir kalır
• Rhea, shadcn/create içinde hem Radix hem Base UI için kullanılabilir

[GN⁺]

Hacker News yorumları

• Bu yazıda Claude’a özgü üslup epey belirgin hissediliyor; artık biraz yorucu ve mesafeli geliyor
  Önemli bir ürün lansmanı yazısı bile bir insanın tamamen özen göstermesine değmiyorsa, çizgiyi nerede çekeceğimizi bilmiyorum

  • Yazı gerekli bilgileri etkili biçimde aktarıyordu ve insanın okuması kolay olacak şekilde yazılmış ve yapılandırılmış görünüyordu
    Yapay zekâyla yazıldığı için bu harika açık kaynak yazılımın geliştirilmesine daha fazla zaman ayrılabildiyse, bence bu iyi bir şey
  • Ne demek istediğini tam olarak anlıyorum. Claude ve plannotator’ı sık kullanıyorum; belirli bir stil kılavuzu istedikten sonra çok daha iyi oldu
    Başlangıç prompt’u olarak “CD dönemi MSDN referansı ve Raymond Chen blogu tarzı”nı alınca, yapay zekânın ürettiği planları sindirme becerim ciddi biçimde arttı; alçakgönüllü, içgörülü ve okura saygılı bir tarz olduğu için şiddetle öneririm
  • Yazıyı okudum; yapay zekâ yazmış gibi gelmedi
    Ekipten biri çıkıp bunu bir insanın yazdığını söylerse biraz komik olurdu
  • Cidden soruyorum: bunun neden önemli olduğunu merak ediyorum. Taslağı yazıp sonra Claude’un cümlelerini gözden geçirip yayımlamış olabilirler
    Yapay zekâ işte yardımcı olduğunda neden illa “yakalamaya” çalışıldığını anlamıyorum; ayrıca bu bir F500 şirketi değil, açık kaynak proje. Kaynakları sınırlı olabilir ve İngilizce ana dilleri olmayabilir
  • Aksine, bundan yorulmamamız gerektiğini düşünüyorum. Çünkü şu an kullanılış ve sunuluş biçimi aldatma ve yalana yakın
    İşbirliği kültürünün güven ve gerçeğe ihtiyaç duyduğuna inanıyorum; yapay zekânın “ben yaptım/söyledim” diye yalan söylediği yazılar istemiyorum
    Örneğin bu yazıyı gerçekten Claude yazdıysa, “I said”, “I meant it” gibi ifadelerle ekipten bir insan doğrudan konuşuyormuş gibi davranmasının nedeni ne? Bu başkasının kimliğine bürünmek ve aldatıcı. İşbirliği ve dürüstlüğü koruyan bir kültürde “benim insanım söyledi” demeli ya da en azından bir insan adına hareket eden yapay zekâ olduğu düzgünce belirtilmeli

• Sıkıcı uygulamalarda insanların Mantine gibi geleneksel UI kütüphaneleri yerine shadcn’in kopyala-yapıştır yaklaşımını tercih edip etmediğini merak ediyorum
  Kopyala-yapıştır yaklaşımı değiştirmeyi kolaylaştırıyor ama yeni sorunlar da doğuruyor. Sadece sürüm numarasını artırmanın yeterli olacağı yerde artık yükseltme için bir yapay zekâ ajanına ihtiyaç duyulması gibi

  • “Sadece sürüm numarasını artırmak yeterli” demek, son birkaç yılda Material UI’ın yarattığı baş ağrılarını ciddi biçimde hafife almak olur
    Sıkıcı bir uygulamada değil, çok büyük bir uygulamada, her büyük sürüm güncellemesinde API’yi ciddi biçimde altüst edip sıkıcı migrasyonlar gerektiriyordu. shadcn’e geçtikten sonra tek tek bileşenleri yükseltmek ve yeni bileşenleri özgürce eklemek kolaylaştı. Material UI’da herhangi bir yerde yeni özellik kullanmak için her şeyi yeni API’ye uydurmak gerekiyordu; shadcn’de ise seçici davranılabiliyor
  • Kopyala-yapıştır yaklaşımını hiç anlamadım. Shadcn bana sadece moda kokuyor; kendim kopyalayıp kullandığımda da neyin bu kadar özel olduğunu anlamıyorum
    Yine de seven kullansın; yapay zekânın avantajlarından biri de HN’nin artık eskisi kadar JavaScript framework konuşmalarıyla tıkanmaması
  • Yeni projelerde giderek vendoring tarafına yöneliyorum
    Hazır UI kütüphanesi almak kısa vadede kolay, ama çoğu zaman gereğinden fazla karmaşık oluyor; kullanmayacağınız özellikleri de uygulamış oluyor; aynı kütüphaneyi kullanan sayısız uygulamadan ayrışmaya çalıştığınızda değiştirmesi zor oluyor; yükseltme yaparken de bu değişiklikler ince yerlerden kırılıyor. Bence en iyi yaklaşım kendi UI kütüphaneni yapmak. Ona sahip olursun, birden çok projede yeniden kullanırsın, istersen aynı görsel stili korursun ve yalnızca ihtiyaç duyduğun özellikleri eklersin
  • Mantine harika. Neredeyse her şeyi hızla oluşturabiliyorsun; sonrasında genişletebiliyor ya da tema ile tek tek bileşenleri tamamen özelleştirebiliyorsun
    Öğrenme eğrisi var ama bence devasa düzeyde değil
  • Pek çok sistemde gerçekte “sadece sürüm numarasını artırmak” diye bir şey pek yok. Bu ancak bileşen kütüphanesi tam olarak istediğin işi yaptığında mümkün
    Gerçekte çoğu zaman bileşen gerekli davranışı tamamen sağlamıyor ve insanlar bileşenlere sık sık ek CSS yapıştırıyor. Alternatif birkaç saatlik işse iki satır CSS çok cazip geliyor; ama o iki satırın da bileşen kütüphanesinin her yeni özelliğinde doğrulanması gerekiyor. Bu tür CSS yamaları çoğaldığında yükseltme başlı başına bir projeye dönüşüyor

• Bu popüler UI araç setlerinin aşırı div render etmesi canımı sıkıyor
  Base UI’ya bakınca neredeyse her bileşen “bir öğe render eder” tarzında; oysa akordeon için details/summary gibi aynı işi yapabilen yerel öğeler var. Yerel web savunucusu değilim; web API’lerinde, özellikle HTML’de de pek çok yanlış olduğunu düşünüyorum, ama div’in aşırı kullanımı da yanlış

• Shadcn’i kullandım ve genel olarak seviyorum, ama Radix tabanlı radyo düğmeleri biraz fazlaydı. Benzer şekilde gereğinden fazla şişirilmiş çözümlerin kullanıldığı select seçenekleri de var
  https://news.ycombinator.com/item?id=46688971

  • Shadcn ve günümüzdeki çoğu UI kütüphanesiyle ilgili temel şikâyetim, tekerleği yaklaşık bininci kez yeniden icat etmeleri
    Yan projede Ark UI’ı deniyorum; etiket girişi gibi gerçekten faydalı bileşenleri de var: https://ark-ui.com/docs/components/tags-input
    Sekmeler/“segment group” bileşeninde, uygulanması epey zor olabilecek animasyonlu bir etkin gösterge var: https://ark-ui.com/docs/components/segment-group
    Ama gereğinden karmaşık “tıkla ve kopyala” düğmeleri ya da yeniden uygulamalar da var; hepsi de uzun uzadıya markup ile div çorbası render ediyor: https://ark-ui.com/docs/components/clipboard, https://ark-ui.com/docs/components/collapsible

• Migrasyon işinin codemod’lardan LLM’lere kayma eğilimi ilginç
  codemod daha deterministik olsa da, o dönemin sona erip ermediğini merak ediyorum

  • LLM kullanarak deterministik codemod yapmak nasıl olur diye düşünüyorum
    Sonra codemod’u çalıştırıp başka deterministik güvenlik önlemleri ekleyerek yineleyebilir, sonucu tekrar LLM’e verip codemod’u iyileştirebilirsiniz
  • Orijinal yazının çerçevesi tehlikeli bir düşünce biçimi. codemod’un kendisi olsa da olur, olmasa da olur
    İstenen şey LLM için bir skill dosyası değil, insanlar için dokümantasyon olmalı. İnsanlar için bir migrasyon rehberi yazmak yeterli. Sonunda skill dosyası ile dokümantasyonun aynı şey olması gerektiğini fark etmek biraz zaman alacak
  • Burada codemod ile ne kastedildiğini merak ediyorum
  • İkisinin birbirini kusursuz biçimde tamamladığını düşünüyorum ve bunun böyle süreceğini sanıyorum
    Yumuşak kurallar için AGENTS.md dosyasını kullanmaya devam ediyor, katı kurallar için özel linter kuralları kullanıyorum; bence bu, iki dünyanın da avantajlarını alma yolu

• shad-CN kullanmak istiyorum ama her seferinde sonunda Mantine’e geri dönüyorum
  Hangi context’i bağlamam gerektiğini hatırlamaktan çok daha hızlı

• Bu değişikliğin kullanıcılara bundle boyutunun azalması gibi daha iyi sonuçlar getirip getirmediğini merak ediyorum
  Yoksa daha çok Shadcn bakımcılarının yaşam kalitesini artıran bir değişiklik mi diye düşünüyorum

• Angular’da shadcn/ui’nin karşılığı nedir merak ediyorum
  PrimeNG yakın zamanda lisansını değiştirdiği için yeni projelere uygun bir alternatif arıyorum

  • PrimeNG lisans değişikliğini HN’de öne çıkarmaya yönelik iki deneme[1] başarısız oldu, ancak PrimeTek bileşen kütüphanesini kullanıyorsanız bu değişiklikten haberdar olmalısınız
    PrimeNG, PrimeReact ve PrimeVue tamamen kapalı kaynağa geçiyor; 2027’den itibaren sürekli kullanım lisansı geliştirici koltuğu başına 800 dolar olacak[2]. Mevcut depolar arşivlendi[3]. PrimeFaces açık kaynak kalmaya devam ediyor, ancak artık PrimeTek çalışanları değil bağımsız gönüllü geliştiriciler tarafından geliştiriliyor ve bakımı yapılıyor
    [1]: https://hn.algolia.com/?q=The+Next+Chapter+of+PrimeTek
    [2]: https://primeui.dev/nextchapter
    [3]: https://github.com/primefaces/primeng
  • Aynı durumdayım. İş yerinde birden fazla uygulamada PrimeNG kullandık ve uygun bir alternatif bulana kadar Angular 21’e bağlı kalacak gibi görünüyoruz
    Ancak bir grup PrimeNG’yi fork’lamış ve bakımını yapmayı planlıyormuş. Yeni adı henüz belli değil
    https://github.com/openng-org/open-prime
  • https://spartan.ng/
  • Shadcn’e benzer bir sistemin Svelte, Angular, Nunchucks gibi çeşitli stack’lerde doğrudan kullanılabilir olmamasına yanıt olarak Lily Design System’ı geliştiriyorum
    Tamamı ücretsiz ve açık kaynak; geri bildirim veya öneri gönderirseniz Lily’ye kolayca eklenebilir
    https://lilydesignsystem.github.io
  • https://www.zardui.com

• Eski tarz skeuomorfik stil rehberlerini özlüyorum
  Sonuncusu sanırım Blueprint’ti

• URL https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default olmalı