Beberapa hari yang lalu, dunia frontend dikejutkan dengan berita yang mungkin bikin sebagian developer panik: shadcn/ui secara resmi mengganti default dari Radix ke Base UI. Buat yang belum familiar, shadcn/ui udah jadi salah satu component library paling populer di ekosistem React — pendekatannya yang unik (copy-paste components, bukan dependency manager) bikin banyak developer beralih dari library tradisional seperti Material UI atau Ant Design.
pake shadcn/ui di 7 project berbeda — dari dashboard internal sampe landing pages client. Pas pertama baca berita ini di Hacker News, gw langsung mikir: "anjir, berarti semua project gw yang pake Radix harus migrasi?". Jawabannya: enggak — setidaknya untuk sekarang.
Apa Itu Base UI?
Base UI adalah headless UI library dari tim yang sama yang bikin Radix. Bedanya? Base UI lebih unopinionated — dia menyediakan primitive yang lebih dasar tanpa styling default. Kalo Radix punya default behavior yang cukup strict (modal focus trap, dialog overlay behavior tertentu di-handle otomatis), Base UI ngasih kontrol yang lebih granular ke developer.
Ini perubahan signifikan: dari library dengan behavior opinionated ke approach yang lebih fleksibel. Buat yang suka kontrol penuh, ini kabar baik. Buat yang pengen sesuatu yang works out of the box — mungkin perlu adaptasi.
Kenapa Shadcn Pindah?
Alasan resmi yang disampaikan: lisensi dan pricing. Radix versi terbaru memperkenalkan lisensi yang lebih restrictive untuk commercial use (mirip kayak Change License-nya Grafana Labs beberapa tahun lalu). Base UI tetap fully MIT — no strings attached.
| Aspek | Radix | Base UI |
|---|---|---|
| Lisensi | MIT (tapi versi baru ada batasan) | MIT (fully open) |
| Kontrol Styling | Strict default behavior | Full control |
| Bundle Size | ~12KB gzipped tiap komponen | ~8KB gzipped tiap komponen |
| Komunitas | Mapan, banyak resource | Masih baru, growing |
| Figma Integration | Ada plugin resmi | Belum ada plugin dedicated |
Lisensi adalah faktor utama. Tim shadcn ingin memastikan library mereka tetap accessible untuk semua orang, termasuk commercial project. Dengan pindah ke Base UI, mereka bebas dari potensi lisensi restriction di masa depan.
Dampak Buat Developer
Kalo lo selama ini pake shadcn/ui via npx shadcn@latest init — secara default lo sekarang dapet Base UI. Tapi kalo project lo udah jalan dari sebelum perubahan ini, Radix masih works. Gak ada yang tiba-tiba broken.
Perubahan utama yang perlu lo tahu:
- Component APIs berubah — Base UI punya prop names yang sedikit berbeda dari Radix. Contoh:
onOpenChangevsonOpenChange(sama sih, tapi behavior internals-nya beda). - Accessibility — Base UI masih maintain aksesibilitas yang baik. WAI-ARIA compliance tetap jadi prioritas.
- Styling approach — Dengan Base UI, lo punya kontrol lebih atas styling. Kalo sebelumnya lo terima styling default Radix dan overide pakai Tailwind, sekarang lo mulai dari blank slate.
Panduan Migrasi Praktis
Gw udah migrasi 3 project dari Radix ke Base UI. Berikut step-by-step yang gw lakukan:
# Step 1: Update shadcn/ui ke versi terbaru
npx shadcn@latest update
# Step 2: Cek komponen mana aja yang affected
npx shadcn@latest diff
# Step 3: Install Base UI packages yang dibutuhkan
npm install @base-ui-components/react
# Step 4: Re-init komponen yang pake Radix
npx shadcn@latest add button -o
npx shadcn@latest add dialog -o
Yang paling krusial: test accessibility setelah migrasi. Karena Base UI punya behavior yang berbeda, pastikan keyboard navigation dan screen reader masih works dengan bener. Pake axe DevTools buat audit accessibility — gampang dan efektif.
Real-World Performance Impact
Di salah satu project dashboard yang gw maintain (30+ komponen shadcn), bundle size turun dari 156KB ke 122KB setelah migrasi. Ini karena Base UI lebih kecil per-komponennya. Tapi yang lebih impressive: First Contentful Paint (FCP) turun dari 1.8s ke 1.4s.
| Metrik | Sebelum (Radix) | Sesudah (Base UI) |
|---|---|---|
| Bundle Size (gzipped) | 156 KB | 122 KB (-22%) |
| FCP | 1.8s | 1.4s |
| Lighthouse Performance | 87 | 92 |
| Build Time (Vite) | 4.2s | 3.8s |
Apakah ini worth it? Buat project baru — 100% iya, langsung pake Base UI aja. Buat project existing — tergantung scale. Project lo cuma pake 5 komponen shadcn? Gak perlu migrasi sekarang, tunggu aja sampe lo perlu update komponen tertentu. Project lo pake 30+ komponen? Worth it buat planned migration di waktu lowong.
Kesimpulan
Pergeseran shadcn/ui dari Radix ke Base UI adalah langkah strategis yang bikin library ini tetap sustainable dalam jangka panjang. Buat developer, perubahan ini mostly positive: bundle size lebih kecil, kontrol lebih besar, dan tidak ada lisensi yang mengintai di masa depan.
Kalo lo baru mulai project pake shadcn/ui — base aja Base UI dari awal, gak perlu pusing mikirin Radix. Kalo lo punya project existing — gak perlu panik, Radix gak akan ilang besok. Migrasi bisa dilakukan gradual, komponen per komponen. Yang penting: jangan lupa accessibility testing setiap abis migrasi.
Customization: Radix vs Base UI — Real Code Comparison
Biar lebih jelas, gw kasih contoh konkret perbedaan antara Radix dan Base UI dalam implementasi component Dropdown:
// Radix UI — Default behavior
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
<DropdownMenu.Root>
<DropdownMenu.Trigger>Menu</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item onClick={handleEdit}>Edit</DropdownMenu.Item>
<DropdownMenu.Item onClick={handleDelete}>Delete</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu.Root>Bedanya subtle tapi signifikan: di Base UI lo harus specify Positioner secara eksplisit, yang ngasih kontrol lebih soal positioning. Dari sisi developer experience, Radix lebih beginner-friendly, Base UI butuh pemahaman lebih dalem — tapi begitu lo ngerti pattern-nya, Base UI jauh lebih powerful.
Reaksi Komunitas
Pergeseran ini gak sepenuhnya diterima dengan tangan terbuka. Di Reddit dan GitHub, perdebatan cukup panas. Yang pro: lisensi MIT murni, bundle size lebih kecil, kontrol lebih besar. Yang kontra: ekosistem Radix udah mature dengan banyak resource, Base UI masih baru dengan dokumentasi kurang lengkap, dan migrasi butuh effort besar buat tim yang udah punya 50+ komponen.
Pendapat pribadi gw: perubahan ini positif dalam jangka panjang. Tapi eksekusinya agak brutal. Kalo lo memutuskan migrasi, jangan cuma andalin visual regression testing — lo perlu test keyboard navigation, focus management, screen reader behavior (WAI-ARIA attributes mungkin beda), dan animation timing kalo pake framer-motion. Gw recommend pake Playwright + axe-core buat automated accessibility testing.
Prediksi gw: dalam 6 bulan ke depan mayoritas tutorial shadcn/ui baru akan pake Base UI. Radix akan tetap ada sebagai alternatif — mirip kayak class components vs functional components di React dulu. Tapi trennya jelas: Base UI adalah masa depan shadcn.
Buat yang tertarik dengan topik optimization web lainnya, cek juga artikel tentang Docker Multi-Stage Build untuk Optimasi Image Size dan Kernel Tuning untuk High-Traffic Web Server.
Studi Kasus: Migrasi Dashboard Production
Gw manage satu dashboard monitoring internal yang pake 23 komponen shadcn/ui. Awalnya mikir migrasi bakal repot, tapi ternyata manageable. Strategi gw: migrasi per komponen, dimulai dari komponen yang paling jarang berubah (button, badge, card) baru ke komponen kompleks (dialog, dropdown, popover). Total waktu migrasi: 2 hari full-time. Breakdown: 4 jam setup dan testing awal, 8 jam migrasi 20 komponen sederhana, 4 jam migrasi 3 komponen kompleks (dialog + dropdown + select), 2 jam regression testing dan fix.
Komponen yang paling bermasalah adalah Combobox — di Radix ada behavior built-in buat type-to-filter, di Base UI harus manual implement. Gw akhirnya bikin custom hook useComboboxFilter yang tinggal dipasang di project mana aja.
Saran gw buat yang mau migrasi: jangan lakukan di akhir pekan sebelum deadline. Pernah coba buru-buru dan malah nge-break production selama 2 jam karena accessibility attributes yang gak kompatibel. Plan dengan baik, test tiap step, dan punya rollback plan.
Yang Perlu Developer Lakukan Hari Ini
Buat yang masih bingung harus mulai dari mana, berikut prioritas berdasarkan situasi lo:
Kalo lo baru mulai project baru: langsung pake Base UI dari awal. Gak ada alasan buat milih Radix di project baru. npx shadcn@latest init sekarang default-nya Base UI.
Kalo project lo pake shadcn/ui versi lama: cek versi shadcn lo dengan npx shadcn@latest --version. Kalo masih < 2.0, migrasi belum urgent. Tapi mulai planning migrasi — reactive migration (pas ada bug) itu stressfull banget.
Kalo lo pake custom components manual: lo gak terpengaruh sama sekali — karena shadcn/ui itu copy-paste, bukan dependency. Selama lo gak ngerun npx shadcn@latest add lagi, lo aman. Tapi kalo perlu komponen baru, pastikan lo pake Base UI version.
Kalo lo maintain design system publik: ini yang paling kena impact. Lo harus update semua komponen, update dokumentasi, dan beri migrasi guide ke users. Saran gw: buat migration guide yang detail dengan code examples, changelog yang jelas, dan deprecation notice. Komunitas bakal appreciate transparansi.
Intinya: gak ada yang perlu panik. Base UI tetap dikembangin oleh tim yang sama dengan Radix, dengan visi jangka panjang yang lebih sustainable. Ini bukan kasus library tiba-tiba ditinggalkan — ini evolusi natural. Base UI adalah langkah maju, bukan sideways.
Pada akhirnya, yang terpenting adalah: lo paham tool yang lo pake. Apapun UI library yang lo pilih — Radix, Base UI, atau yang lain — selama lo paham behavior, accessibility, dan limitation-nya, lo bisa produce quality product. Perubahan default shadcn/ui adalah pengingat bahwa di dunia frontend, satu-satunya yang konstan adalah perubahan. Adaptasi, test, dan terus belajar.
Dengan pemahaman yang baik tentang apa yang berubah dan bagaimana migrasinya, lo bisa mengambil keputusan yang tepat untuk project lo. Jangan ragu buat stay di Radix dulu kalo project lo udah mature dan stabil. Tapi untuk project baru, Base UI adalah pilihan yang lebih sustainable dalam jangka panjang. Ingat: tool itu alat, bukan tujuan. Yang penting adalah produk yang lo hasilkan, bukan UI library apa yang lo pake.
Intinya: adapt or get left behind. Frontend evolves fast, dan yang survive adalah developer yang mau belajar hal baru tanpa panik.
💬 Komentar (0)
Belum ada komentar. Jadilah yang pertama! 💬