Shadcn/UI beralih menjadikan Base UI sebagai default, menggantikan Radix

• Mulai Juli 2026, shadcn/ui mengubah alur default untuk proyek baru dan dokumentasi menjadi berpusat pada Base UI, beralih dari default Radix yang digunakan sejak peluncurannya pada 2023
• Base UI telah mencapai versi stabil 1.6.0 dan lebih dari 6 juta unduhan per minggu, serta dipilih 2:1 lebih sering daripada Radix di proyek shadcn/create
• Radix tidak dihentikan dukungannya, aplikasi yang ada dapat tetap digunakan apa adanya, dan selain komponen yang hanya ada di Base UI, pembaruan dan komponen baru akan terus disediakan
• Migrasi disediakan bukan sebagai codemod melainkan sebagai skill agen, yang memindahkan komponen yang dimodifikasi beserta lokasi penggunaannya secara bertahap per komponen, sambil meninggalkan laporan .migration/ dan commit git
• Komponen UI chat, registry berbasis repositori GitHub, shadcn eject, hingga style baru Rhea ikut ditambahkan, memperluas cakupan shadcn/ui ke distribusi komponen dan penyusunan UI produk secara menyeluruh

---

Base UI menjadi pustaka komponen default

• Mulai Juli 2026, Base UI ditetapkan sebagai pustaka komponen default shadcn/ui
• Saat diluncurkan pada Januari 2023, shadcn/ui dibangun di atas Radix, yang saat itu merupakan pilihan dengan komponen headless tanpa style, API, aksesibilitas, dan pengalaman penggunaan di aplikasi nyata
• Base UI adalah pustaka baru yang sedang dibuat oleh tim yang juga membuat Radix, dan shadcn/ui membangun ulang semua komponen untuk Base UI sambil mempertahankan abstraksi yang ada
• Pada Desember 2025, npx shadcn create sudah memungkinkan pemilihan kedua pustaka, dan pada Januari 2026 dokumentasi Base UI diselesaikan

Alasan default diubah

• Stabilitas dan alur penggunaan Base UI

  • Versi Base UI adalah 1.6.0
  • Unduhan mingguan mencapai lebih dari 6 juta kali
  • Tim Base UI secara rutin merilis komponen baru yang berguna
  • Proyek baru shadcn/ui sudah menggunakan Base UI
  • Proyek yang dibuat dengan shadcn/create memilih Base UI 2:1 dibandingkan Radix
  • shadcn/ui kini menjadikan kecenderungan pilihan ini sebagai default resmi

Perubahan pada proyek baru dan dokumentasi

• Menjalankan npx shadcn init pada proyek baru akan menjadikan Base UI sebagai pilihan default
• shadcn/create akan menampilkan Base UI lebih dulu
• Halaman komponen di dokumentasi akan terbuka dengan tab Base UI sebagai default, dan dokumentasi Radix tetap bisa diakses dengan satu klik

Hal yang perlu diketahui pengguna Radix

• Radix tetap didukung

  • shadcn/ui tetap mempertahankan dukungan untuk Radix
  • Selain komponen yang hanya ada di Base UI, semua pembaruan dan komponen baru akan disediakan untuk kedua pustaka
  • Aplikasi yang sudah ada tidak perlu dimigrasikan
  • Radix adalah pustaka yang matang dan telah teruji
  • shadcn/ui juga masih menggunakan Radix di production, dan proyek internalnya pun tidak dimigrasikan
  • Jika Anda lebih memilih Radix untuk proyek baru, Anda dapat menggunakan flag
  • Jika skrip atau CI yang menjalankan shadcn init secara non-interaktif mengharapkan Radix, tambahkan -b radix untuk mempertahankan alur lama
  • Saat membuat registry, jika ingin mengunci ke pustaka tertentu, Anda dapat menyediakan konfigurasi registry:base
  • Item tanpa konfigurasi tersebut kini akan diinisialisasi dengan Base UI
  • Base UI direkomendasikan untuk proyek baru

Cara migrasi ke Base UI

• Migrasi tidak wajib, tetapi jika diinginkan Anda dapat menggunakan skill
• Anda dapat meminta ke agen coding seperti ini
  • migrate accordion to base-ui
• Pendekatan default adalah migrasi bertahap
  • Komponen dan lokasi penggunaannya dipindahkan satu per satu
  • Proyek tetap dalam keadaan green dan siap deploy sepanjang proses
  • Selama pekerjaan berlangsung, kedua pustaka bisa hidup berdampingan
  • Proses dapat dihentikan di tengah lalu dilanjutkan nanti
  • Jika diinginkan, seluruh proyek juga bisa diminta sekaligus

Mengapa memilih skill alih-alih codemod

• Komponen shadcn/ui adalah kode yang dimiliki dan dimodifikasi pengguna, sehingga codemod mungkin cocok untuk komponen yang belum diubah, tetapi bisa rusak pada komponen yang sudah dimodifikasi
• Skill memuat perubahan nama, perubahan prop, dan perbedaan perilaku yang telah ditinjau manual berdasarkan kedua pustaka
• Agen akan memahami perubahan yang dibuat pengguna dan menerapkannya juga pada target migrasi
• Perubahan yang bisa diproses secara mekanis akan diperbarui di seluruh proyek
  • Contoh: asChild diubah menjadi render
• Perubahan perilaku tidak akan ditambal diam-diam, melainkan ditandai, dan keputusan akhir tetap ada pada pengguna

Hasil yang ditinggalkan proses migrasi

• Setiap eksekusi meninggalkan tiga hasil
  • Kode yang berfungsi: typecheck dan build dijalankan sebelum keberhasilan dilaporkan
  • Laporan per komponen: perubahan, bagian yang dibiarkan apa adanya, dan checklist pemeriksaan manual ditinggalkan di .migration/ pada root proyek
  • Riwayat git yang bersih: satu commit per komponen ditinggalkan di branch, dan rollback cukup dengan menghapus branch
• Contoh laporan adalah .migration/accordion.md, yang mencakup bagian berikut
  • Changed
  • Left alone
  • Behavior changes
  • Verify by hand
• Karena progres tersimpan di file dan riwayat git tanpa status tersembunyi, pekerjaan dapat dilanjutkan dari agen atau sesi mana pun
• Berjalan di Claude Code, Cursor, dan agen yang mendukung skill
• Dalam pengujian pada proyek nyata, dari lebih dari 60 komponen, 36 di antaranya memakai Radix; migrasi penuh memakan waktu sekitar 25 menit, dengan sekitar 10 ribu token per komponen
• Build lulus dengan bersih dan kustomisasi tetap dipertahankan

Penambahan komponen untuk antarmuka chat

• Pada Juni 2026, komponen baru untuk membangun antarmuka chat ditambahkan
  • MessageScroller
  • Message
  • Bubble
  • Attachment
  • Marker
• Tahap pertama ini mencakup bagian inti yang menyusun lapisan percakapan
  • scroll
  • baris pesan
  • bubble
  • lampiran
  • marker
• MessageScroller adalah kontainer scroll untuk percakapan
  • anchored turns
  • streamed replies
  • saved thread restore
  • prepended history
  • jump-to-message
  • scroll controls
  • visibility tracking
• MessageScroller tidak memiliki pesan, status AI, pengiriman, penyimpanan, atau status model; renderer konten disediakan oleh pengguna
• MessageScroller juga tersedia sebagai komponen headless tanpa style di @shadcn/react

Peran Message, Bubble, Attachment, dan Marker

• Message menata satu baris percakapan
  • avatar
  • alignment
  • header
  • content
  • footer
  • menangani grouped messages
• Bubble merender permukaan pesan
  • variants
  • alignment
  • reactions
  • links
  • buttons
  • mendukung collapsible content
• Attachment merender file dan gambar
  • media
  • metadata
  • upload state
  • actions
  • menyediakan full-card trigger sambil tetap mempertahankan action terpisah yang bisa diklik
• Marker merender pembaruan status, catatan sistem, baris pembatas, dan pemisah label
  • digunakan untuk hal seperti streaming state, tool activity, dan date breaks
• Komponen-komponen ini dirancang kecil agar bisa dikombinasikan untuk AI chat, support inbox, team thread, group chat, dan UI percakapan khusus produk

Utilitas CSS untuk UI chat dan @shadcn/react

• Dua utilitas CSS baru ditambahkan
  • scroll-fade: menambahkan fade indikator scroll di tepi kontainer scroll
  • shimmer: menambahkan shimmer ke teks status live seperti "Thinking…", "Generating response…", eksekusi tool, dan marker streaming
• Kedua utilitas ini termasuk dalam shadcn/tailwind.css
  • Proyek yang diinisialisasi dengan npx shadcn@latest init sudah menyertakannya
• @shadcn/react adalah paket baru untuk komponen React headless tanpa style
  • Primitive pertamanya adalah @shadcn/react/message-scroller
  • Komponen registry membungkusnya dengan style shadcn/ui, tetapi perilaku scroll seperti anchoring, auto-follow, prepend preservation, scroll commands, dan visibility ada di dalam paket
• Pendekatan ini menyediakan perilaku tanpa terikat pada style visual, serta memungkinkan logika interaksi yang sulit diuji di satu tempat
• Dapat digunakan baik dengan Radix maupun Base UI

Hubungannya dengan AI Elements

• Komponen chat baru ini tidak menggantikan AI Elements
• Komponen dan pola antarmuka AI dari AI Elements tetap dapat digunakan
• Rilis ini berfokus pada membawa bagian inti chat ke shadcn/ui satu per satu
• Jika Anda sudah menggunakan komponen AI Elements, tidak perlu menulis ulang aplikasi
• Jika membutuhkan abstraksi yang lebih baru, style yang diperbarui, dan dukungan untuk Radix maupun Base UI, Anda dapat mencoba versi shadcn/ui

Menggunakan repositori GitHub sebagai registry

• Mulai Juni 2026, repositori GitHub publik dapat digunakan sebagai registry
• Tambahkan registry.json di root repositori dan definisikan item yang akan didistribusikan, maka pengguna dapat menginstalnya langsung dari GitHub dengan CLI shadcn
• GitHub registry adalah source registry
  • Tidak perlu menjalankan shadcn build
  • Tidak perlu mem-publish file JSON item yang dihasilkan
  • Tidak perlu menyiapkan server registry
• CLI akan membaca registry.json di root, menafsirkan item include, menemukan item yang diminta, lalu memasang file terkait
• Item registry tidak terbatas pada komponen
  • components
  • hooks
  • utilities
  • design tokens
  • feature kits
  • project conventions
  • agent instructions
  • testing setup
  • CI workflows
  • release workflows
  • templates
  • codemods
  • migration kits
  • dan file proyek lainnya dapat didistribusikan
• Alamat GitHub registry bekerja dalam perintah yang sama seperti alamat registry yang ada
  • list
  • search
  • view
  • install

shadcn eject dan shadcn/tailwind.css

• Dengan dukungan untuk Radix dan Base UI sekaligus, dibutuhkan tempat untuk meletakkan utilitas Tailwind bersama yang dipakai kedua pustaka
  • Contoh: custom variant seperti data-open: dan data-closed:
  • Contoh: utilitas seperti no-scrollbar
• Beberapa bug selama pengerjaan dukungan RTL juga lebih mudah diperbaiki di satu tempat daripada menerapkannya berulang ke semua komponen
• Untuk itu dibuat shadcn/tailwind.css
  • Saat menjalankan init, @import "shadcn/tailwind.css" akan ditambahkan ke file CSS global
  • Ini bekerja seperti import CSS semacam tw-animate-css
  • Ini adalah dependensi kecil yang di-tree-shake di production dan di-resolve saat build
• Jika tidak ingin dependensi CSS pada paket shadcn, Anda dapat menggunakan shadcn eject
  • shadcn/tailwind.css akan di-inline ke file CSS global
  • Dependensi shadcn akan dihapus dari proyek
• Dalam monorepo, perintah harus dijalankan di workspace yang memiliki components.json dan file CSS global

Style baru Rhea

• Pada Mei 2026, style baru shadcn/ui Rhea ditambahkan
• Rhea adalah Luma yang lebih compact, dengan spacing lebih kecil dan surface lebih rapat, dibuat untuk antarmuka produk yang fokus
• Rhea mempertahankan kelembutan dan bentuk Luma sambil menata tombol, input, menu, kartu, dan daftar dengan lebih rapat
• Pendekatan mengubah --spacing milik Luma tidak dipilih
  • Karena --spacing adalah multiplier, mengubahnya akan mengubah arti utilitas Tailwind yang sudah familier seperti p-2, w-4, dan m-16 di seluruh aplikasi
• Rhea disediakan sebagai style terpisah sehingga ukuran komponen, gap, dan densitas dapat disesuaikan langsung, sementara skala utilitas dasarnya tetap mudah diprediksi
• Rhea dapat digunakan di shadcn/create untuk Radix maupun Base UI

[GN⁺]

Pendapat di Hacker News

• Di tulisan ini, gaya khas Claude terasa cukup jelas, jadi sekarang rasanya agak melelahkan dan terasa berjarak
  Kalau bahkan tulisan peluncuran produk yang penting pun tidak cukup layak untuk benar-benar diperhatikan manusia, saya tidak tahu harus menarik garis di mana

  • Tulisan itu menyampaikan hal-hal yang diperlukan secara efektif, dan terlihat ditulis serta disusun agar enak dibaca manusia
    Kalau ditulis dengan AI sehingga mereka bisa memakai lebih banyak waktu untuk mengembangkan perangkat lunak open source yang hebat ini, menurut saya itu justru hal yang baik
  • Saya paham persis maksudnya. Saya sering memakai Claude dan plannotator, dan hasilnya jauh lebih baik setelah meminta panduan gaya tertentu
    Saat saya memakai “gaya referensi MSDN era CD dan blog Raymond Chen” sebagai prompt awal, kemampuan saya mencerna rencana yang dibuat AI meningkat besar; gayanya rendah hati, berwawasan, dan menghormati pembaca, jadi sangat saya rekomendasikan
  • Saya sudah membaca tulisannya, dan tidak terdengar seperti ditulis AI
    Akan agak lucu kalau seseorang dari tim muncul dan mengatakan bahwa itu ditulis manusia
  • Kalau ditanya serius, saya merasa kenapa itu penting. Bisa saja mereka menulis draf, lalu meninjau kalimat Claude dan memublikasikannya
    Saya tidak mengerti kenapa setiap kali AI membantu pekerjaan, orang merasa perlu “membongkarnya”; ini bukan perusahaan F500, melainkan proyek open source. Sumber dayanya juga terbatas, dan bahasa Inggris mungkin bukan bahasa ibu mereka
  • Menurut saya justru bukan sesuatu yang melelahkan untuk didengar. Cara AI digunakan dan disajikan seperti sekarang ini mendekati tipu daya dan kebohongan
    Saya percaya budaya kolaborasi membutuhkan kepercayaan dan kebenaran, dan saya tidak ingin tulisan di mana AI berbohong dengan mengatakan “saya melakukan/mengatakan” sesuatu
    Misalnya jika tulisan ini benar-benar ditulis Claude, saya bertanya-tanya kenapa ia berpura-pura seolah seseorang dari tim berbicara langsung dengan ungkapan seperti “I said”, “I meant it”. Itu penyamaran identitas dan menipu. Dalam budaya yang menjaga kolaborasi dan kejujuran, seharusnya ia mengatakan “manusia saya berkata”, atau setidaknya diberi label dengan benar sebagai AI yang bertindak mewakili manusia

• Untuk aplikasi yang membosankan, saya penasaran apakah orang lebih menyukai pendekatan salin-tempel shadcn dibanding library UI tradisional seperti Mantine
  Pendekatan salin-tempel memang mudah dimodifikasi, tetapi juga menimbulkan masalah baru. Hal yang biasanya cukup dengan menaikkan nomor versi kini jadi membutuhkan agen AI untuk upgrade

  • Pernyataan “cukup menaikkan nomor versi” sangat meremehkan sakit kepala yang ditimbulkan Material UI selama beberapa tahun terakhir
    Di aplikasi yang sangat besar, bukan aplikasi membosankan, setiap pembaruan versi mayor membalik API secara besar-besaran sehingga membutuhkan migrasi yang membosankan. Setelah pindah ke shadcn, semuanya jadi lebih mudah karena bisa meng-upgrade satu komponen saja dan menambahkan komponen baru dengan bebas. Di Material UI, untuk memakai fitur baru di mana pun, semuanya harus diubah agar sesuai dengan API baru, sedangkan di shadcn bisa dilakukan secara selektif
  • Saya sama sekali tidak memahami pendekatan salin-tempel. Shadcn terasa seperti sekadar tren, dan setelah mencoba menyalinnya sendiri pun saya tidak mengerti apa hebatnya
    Tapi kalau orang menikmatinya, silakan saja; salah satu kelebihan AI adalah HN tidak lagi sesesak dulu dengan pembahasan framework JavaScript
  • Untuk proyek baru, saya makin condong ke arah vendoring
    Mengambil library UI siap pakai memang mudah dalam jangka pendek, tetapi biasanya terlalu kompleks, mengimplementasikan fitur yang tidak dipakai, sulit dimodifikasi ketika ingin membedakan diri dari banyak aplikasi lain yang memakai library yang sama, dan modifikasi itu sering rusak secara halus saat upgrade. Menurut saya pendekatan terbaik adalah membuat library UI sendiri. Anda memilikinya sendiri, bisa menggunakannya ulang di beberapa proyek, mempertahankan gaya visual yang sama jika mau, dan menambahkan hanya fitur yang dibutuhkan
  • Mantine itu bagus. Anda bisa membuat hampir apa saja dengan cepat, lalu setelah itu memperluasnya atau sepenuhnya mengustomisasi tema dan komponen individual
    Ada kurva belajar, tetapi menurut saya tidak sampai sangat besar
  • Di banyak sistem, pada kenyataannya hampir tidak pernah sekadar “menaikkan nomor versi”. Itu hanya mungkin jika library komponen melakukan persis apa yang diinginkan
    Dalam praktiknya, sering kali komponen tidak sepenuhnya menyediakan perilaku yang dibutuhkan, dan orang sering menambahkan CSS ekstra ke komponen. Kalau alternatifnya adalah pekerjaan beberapa jam, dua baris CSS sangat menggoda, tetapi dua baris itu pun harus diverifikasi terhadap setiap fitur baru di library komponen. Jika tambalan CSS semacam ini bertambah banyak, upgrade berubah menjadi satu proyek tersendiri

• Saya terganggu karena toolkit UI populer seperti ini merender div secara berlebihan
  Melihat Base UI, hampir semua komponennya seperti “merender sebuah elemen”, padahal untuk akordeon ada elemen native seperti details/summary yang bisa melakukan hal yang sama. Saya bukan penginjil web native, dan menurut saya API web, terutama HTML, juga punya banyak kekurangan, tetapi penyalahgunaan div juga salah

• Saya pernah memakai Shadcn dan secara umum menyukainya, tetapi radio button berbasis Radix terasa agak berlebihan. Ada juga opsi pilihan yang memakai solusi serupa yang terlalu membengkak
  https://news.ycombinator.com/item?id=46688971

  • Keluhan utama saya terhadap Shadcn dan sebagian besar library UI masa kini adalah mereka menciptakan ulang roda untuk kira-kira yang keseribu kalinya
    Saya sedang mencoba Ark UI di proyek sampingan, dan ada komponen yang benar-benar berguna seperti input tag: https://ark-ui.com/docs/components/tags-input
    Komponen tab/“segment group” memiliki indikator aktif beranimasi yang tampaknya cukup sulit diimplementasikan: https://ark-ui.com/docs/components/segment-group
    Namun ada juga tombol “klik untuk menyalin” yang terlalu rumit dan reimplementasi lain, dan semuanya merender sup div dengan markup bertele-tele: https://ark-ui.com/docs/components/clipboard, https://ark-ui.com/docs/components/collapsible

• Menarik melihat alur pekerjaan migrasi bergeser dari codemod ke LLM
  Meski codemod memang lebih deterministik, saya penasaran apakah eranya mulai berakhir

  • Saya jadi berpikir bagaimana kalau menggunakan LLM untuk membuat codemod deterministik
    Lalu jalankan codemod itu, tambahkan pengaman deterministik lain, ulangi prosesnya, dan masukkan kembali hasilnya ke LLM untuk memperbaiki codemod
  • Framing di artikel asli adalah pola pikir yang berbahaya. Codemod itu sendiri boleh ada atau tidak
    Yang dibutuhkan seharusnya bukan file skill untuk LLM, melainkan dokumentasi untuk manusia. Cukup tulis panduan migrasi untuk manusia. Pada akhirnya akan butuh waktu untuk menyadari bahwa file skill dan dokumentasi seharusnya adalah hal yang sama
  • Saya penasaran apa yang dimaksud dengan codemod di sini
  • Menurut saya keduanya saling melengkapi dengan sempurna, dan akan tetap begitu ke depannya
    Untuk aturan yang lunak saya tetap memakai file AGENTS.md, dan untuk aturan yang keras saya memakai aturan linter kustom; menurut saya ini cara mengambil kelebihan dari dua dunia sekaligus

• Saya ingin memakai shad-CN, tetapi setiap kali pada akhirnya selalu kembali ke Mantine
  Jauh lebih cepat daripada mengingat konteks apa saja yang harus dihubungkan

• Saya penasaran apakah perubahan ini memberi hasil yang lebih baik bagi pengguna, seperti ukuran bundle yang lebih kecil
  Atau apakah ini lebih merupakan perubahan yang meningkatkan kualitas hidup para maintainer Shadcn

• Saya penasaran apa padanan shadcn/ui di Angular
  PrimeNG baru-baru ini mengubah lisensinya, jadi saya sedang mencari alternatif yang cocok untuk proyek baru

  • Dua upaya[1] untuk menaikkan perubahan lisensi PrimeNG ke HN gagal, tetapi jika Anda memakai library komponen PrimeTek, Anda perlu mengetahui perubahan ini
    PrimeNG, PrimeReact, dan PrimeVue semuanya beralih menjadi closed source sepenuhnya, dan mulai 2027 lisensi penggunaan berkelanjutan menjadi 800 dolar per kursi developer[2]. Repositori lama diarsipkan[3]. PrimeFaces tetap open source, tetapi kini dikembangkan dan dipelihara oleh developer sukarelawan independen yang bukan karyawan PrimeTek
    [1]: https://hn.algolia.com/?q=The+Next+Chapter+of+PrimeTek
    [2]: https://primeui.dev/nextchapter
    [3]: https://github.com/primefaces/primeng
  • Situasi saya sama. Di kantor kami sudah memakai PrimeNG di beberapa aplikasi, dan sepertinya akan tertahan di Angular 21 sampai menemukan pengganti yang sesuai
    Namun ada satu grup yang telah mem-fork PrimeNG dan berencana memeliharanya. Nama barunya belum diputuskan
    https://github.com/openng-org/open-prime
  • https://spartan.ng/
  • Kami sedang membuat Lily Design System sebagai respons atas belum tersedianya sistem mirip Shadcn yang bisa langsung dipakai di berbagai stack seperti Svelte, Angular, dan Nunchucks
    Semuanya gratis dan open source, dan jika Anda mengirim masukan atau saran, itu bisa ditambahkan dengan mudah ke Lily
    https://lilydesignsystem.github.io
  • https://www.zardui.com

• Saya rindu panduan gaya skeuomorphic ala lama
  Sepertinya yang terakhir adalah Blueprint

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