Radix vs Ark UI 2026: Headless Component Primitive Karşılaştırması

Radix UI, React için stilsiz ama erişilebilirlik, klavye davranışı ve odak yönetimi tam tanımlı düşük seviyeli bileşen primitive’leri sağlayan bir kütüphanedir. 2026 itibarıyla GitHub’da yaklaşık 17.000’den fazla yıldız (radix-ui/primitives reposu) toplayan ve State of JS 2024 anketinde React ekosistemindeki en yüksek “memnuniyet” puanlı UI primitive kütüphaneleri arasında yer alan Radix, Vercel, Linear, CodeSandbox ve Shadcn UI tarafından üretimde kullanılıyor. Ark UI ise Chakra ekibinin (Segun Adebayo) çıkardığı, aynı erişilebilirlik standartlarını React + Vue + Solid + Svelte hedefleri için tek state machine ile sunan framework-agnostic bir alternatif: 2024’te 1.0, 2025’te 5.x serisinde stabilize oldu. Bu yazıda iki primitive kütüphanesini WAI-ARIA uyumu, bundle boyutu, framework desteği, ekosistem ve gerçek üretim senaryolarına göre kıyaslıyoruz.

Headless UI primitive seçimi 2026’da artık “Tailwind ile uyumlu mu?” sorusunun çok ötesinde: çok-framework destek, server components uyumluluğu ve state machine determinizmi karar faktörlerine eklendi. Aşağıdaki bölümler, Shadcn UI tarzı kendi tasarım sisteminizi kuracaksanız hangi primitive temelinin daha az teknik borç bırakacağını analitik veriyle açıklıyor.

Headless Primitive Nedir, Neden 2026’da Standart Oldu?

Headless component primitive, görünüm (stil) ile davranış (state, klavye, ARIA, focus trap) sorumluluklarını ayıran yaklaşımdır. Geleneksel UI kütüphaneleri (Material UI, Ant Design) her ikisini kontrol ederken, headless sadece davranışı verir; CSS’i kullanıcı yazar. Bu ayrım design system’i ürün markasına bağlamayı ve tasarım borcunu azaltmayı sağlar. Shadcn UI 2024’te Radix üzerine kurularak modeli popülerleştirdi: GitHub’da 75.000+ yıldız, npm’de haftalık 1.5M+ indirme (npm-stat, Mart 2026).

Headless’in yükselişinin üç teknik sebebi var. Birincisi, WCAG 2.2 AA uyumunu sıfırdan implemente etmek riskli: ENISA 2024 raporuna göre Avrupa’da web uygulamalarında erişilebilirlik açığı %71. İkincisi, React Server Components (RSC) sınırı: client-only primitive’lerin ağır JS payload taşımaması gerekir. Üçüncüsü, Tailwind CSS 4 motoru stil tarafını üstlenince davranış primitive’ini bağımsız seçmek cazipleşti. Detay için React Server Components mimarisi yazısına bakabilirsiniz.

Üç ana oyuncu: Radix UI, Ark UI ve Headless UI (Tailwind Labs). Radix sadece React’a; Ark UI Zag.js state machine üzerinden React, Vue, Solid, Svelte ve Preact’a; Headless UI sadece React + Vue’ya hedef veriyor. Bu yazıda odak Radix vs Ark UI çünkü 2026 design system kararının çekirdeği bu iki kütüphane.

Radix UI: Mimari, Felsefe ve Sınırlar

Radix UI, WorkOS ekibinin (önceden Modulz) 2020’de açtığı bir projedir ve 2024 WorkOS satın alımıyla kurumsal destek aldı. Reposu monorepo: @radix-ui/react-dialog, @radix-ui/react-popover, @radix-ui/react-dropdown-menu gibi 30+ paket yayınlar. Her primitive ortalama 8-25 KB min+gz (bundlephobia, 2026 Q1). Composition tabanlı: Dialog.Root, Dialog.Trigger, Dialog.Portal, Dialog.Content slot pattern uygular.

Radix’in tasarım kararları net ve dogmatiktir. Klavye davranışı için WAI-ARIA Authoring Practices 1.2 rehberini harfiyen takip eder; Tab/Shift+Tab focus trap, Escape kapatma, arrow keys ile menü gezinme tüm primitive’lerde tutarlı. Animasyon için CSS data attribute (data-state="open", data-side="bottom") verir; Framer Motion veya CSS animation kullanıcının seçimi. Portal sistemi React’in createPortal‘ı üzerine kurulu ve nested portal’ları doğru yönetir.

Sınırlar da bilinçli. Radix sadece React: Vue, Svelte veya Solid hedefi yok. RSC uyumu için tüm interaktif primitive’ler "use client" direktifi ister; bu Next.js 14+ App Router’da bilinçli kullanılmalı (Next.js 14 SaaS mimarisi yazısında detaylandırıyoruz). Form primitive yok: react-hook-form ile entegre edilir. DataGrid, virtual list gibi composite bileşenler kapsam dışı; TanStack Table/Virtual ayrı kütüphanelerle çözülür.

Radix Paketi	Bundle (min+gz)	Bağımlılık	WAI-ARIA Pattern
@radix-ui/react-dialog	~9 KB	primitive, portal, focus-scope	Modal Dialog
@radix-ui/react-popover	~13 KB	primitive, popper	Tooltip+Popover hibrit
@radix-ui/react-dropdown-menu	~18 KB	menu, popper, focus-guards	Menu
@radix-ui/react-select	~22 KB	popper, collection, visually-hidden	Listbox + Combobox
@radix-ui/react-toast	~11 KB	primitive, visually-hidden	Live Region
@radix-ui/react-accordion	~8 KB	collapsible, collection	Accordion

Sayılar bundlephobia 2026 Q1 ölçümlerinden; tree-shaking sonrası 1-3 KB daha düşebilir. Karşılaştırma: Material UI’ın eşdeğer Dialog’u ~45 KB.

Ark UI: Zag.js State Machine Yaklaşımı

Ark UI, Chakra UI yaratıcısı Segun Adebayo’nun 2023’te tanıttığı projedir ve mimarisi temelde farklıdır: tüm bileşen davranışları Zag.js adlı framework-agnostic finite state machine (FSM) kütüphanesi üzerinde tanımlanır. Zag.js her primitive için saf bir state machine + transition tablosu üretir; React, Vue, Solid, Svelte adaptörleri bu makineyi kendi reaktif modellerine bağlar. Bu yaklaşım XState’ten ilham alır ama daha hafif (Zag core ~5 KB) ve runtime’da deterministik.

FSM yaklaşımının pratik faydaları ölçülebilir. Birincisi, davranış paritesi: aynı Combobox React’ta ve Vue’da tıpatıp aynı klavye akışına sahip. Çoklu framework kullanan kurumlar için (örnek: ana ürün React, marketing site Vue) tek tasarım dili mümkün. İkincisi, test edilebilirlik: machine geçişleri DOM’dan bağımsız doğrulanabilir. Üçüncüsü, edge case kapsamı: WAI-ARIA APG’nin tüm klavye senaryoları machine’de explicit transition olarak yazılı.

Ark UI’ın güçsüz noktaları da var. Bundle boyutu Radix’e göre ortalama %20-35 daha büyük çünkü her primitive Zag.js çekirdeğine + adapter’a + presentation layer’a ihtiyaç duyar. Composition API daha verbose: bir Combobox kurmak için useCombobox hook + JSX render aşamasında 8-12 prop slot bağlamak gerekir. Ekosistem 2026’da hâlâ Radix kadar olgunlaşmış değil: Shadcn benzeri “ready-to-paste” tema kataloğu Ark için yeni gelişiyor (Park UI projesi 2025’te başladı).

Ark Bileşeni	Bundle React (min+gz)	State Makinesi	Çok-Framework
Dialog	~14 KB	Zag dialog machine	React, Vue, Solid, Svelte
Combobox	~28 KB	Zag combobox + collection	4 framework
Date Picker	~32 KB	Zag date-picker	4 framework
Toast	~12 KB	Zag toast machine	4 framework
Menu	~22 KB	Zag menu machine	4 framework
Tour (yeni)	~16 KB	Zag tour	4 framework

Ark UI’ın Date Picker ve Tour gibi Radix’te bulunmayan bileşenleri var; bu, complex composite primitive ihtiyacı olan ürünler için belirgin avantaj.

WAI-ARIA Uyumu ve Erişilebilirlik Derinliği

Her iki kütüphane de WAI-ARIA Authoring Practices’i hedefler ama implementasyon derinliği farklıdır. Radix’in test stratejisi ağırlıklı olarak Cypress + RTL üzerine kurulu; her primitive için 40-80 unit test ve manuel ekran okuyucu (VoiceOver, NVDA, JAWS) test logları repo’da public. Ark UI ise Zag machine’in transition tablosunu otomatik test ediyor: machine bir state’e nasıl giriyor, hangi event hangi transition’ı tetikliyor — bu deterministik kontrat olarak test edilebiliyor.

• Klavye davranışı: Her ikisi de Tab/Escape/Arrow keys/Home/End’i WAI-ARIA APG rehberine uyumlu uygular. Type-ahead search (kullanıcı listede harfle aramaya başlar) her ikisinde de var.
• Focus management: Radix focus-scope paketi nested focus trap’i pop sırasıyla yönetir; Ark UI Zag focus-trap machine ile aynı davranışı sağlar.
• Live regions: Toast bileşeninde her iki kütüphane de aria-live="polite" ve role="status" doğru veriyor.
• Screen reader testleri: Radix repo’da public test matrisi (Safari/VO, Chrome/NVDA, Firefox/NVDA, Edge/Narrator). Ark UI test matrisi daha sınırlı ama Zag machine determinizmi davranışı önceden tahmin edilebilir kılıyor.
• RTL (Right-to-Left) destek: Her ikisi de RTL doğru çalışır; Türkçe sitelerinde sorun yok, Arapça/İbranice multi-locale projelerde dikkat: Radix’in popper konumlandırma dir attribute’una otomatik tepki verir.

Erişilebilirlik kapsama avantajı incelikli: Radix daha uzun süredir production’da olduğu için edge case (nested dialog inside popover inside dropdown gibi) senaryoları daha çok test edilmiş. Ark UI yeni primitive’lerde (Tour, Signature Pad) öncülük ediyor. ENISA 2024’e göre Avrupa’da web uygulamalarının yalnızca %29’u WCAG 2.2 AA seviyesinde; primitive seçimi bu açığı kapatmada belirleyici.

Bundle, Performance ve Core Web Vitals Etkisi

Headless primitive’lerin Core Web Vitals etkisi başlıca INP (Interaction to Next Paint) ve LCP metriklerinde görünür. Google CrUX 2026 Q1 verilerine göre INP < 200ms hedefi mobil siteler için belirleyici ve ağır JS payload bunu doğrudan etkiler.

Senaryo	Radix Bundle Toplam	Ark UI Bundle Toplam	Material UI Eşdeğer
Sadece Dialog + Toast	~20 KB	~26 KB	~58 KB
Form-heavy (Dialog + Select + Combobox + Toast)	~60 KB	~82 KB	~140 KB
Full design system (12 primitive)	~135 KB	~180 KB	~310 KB
Tree-shake sonrası tipik	~95 KB	~125 KB	~240 KB
HTTP/2 + Brotli sonrası transfer	~38 KB	~52 KB	~98 KB

Bu sayılar bundlephobia + size-limit ölçümlerinden derlendi; gerçek değerler Next.js/Vite konfigürasyonuna göre değişir. Radix’in avantajı ortalama %25 daha hafif olması; Ark UI’ın avantajı bundle aynı kodu birden çok framework’te tekrar üretmemek (kurumsal monorepo’da net kazanç).

Hydration farkı düşük-orta segment cihazlarda tipik 30-80 ms; bu INP bütçesinin %15-40’ına denk. Core Web Vitals için yalnız primitive değil code-splitting ve "use client" sınırı da önemli.

Framework Desteği ve Çoklu-Stack Senaryoları

2026’da kurumsal frontend stack’i nadiren saf React: marketing siteleri Astro, dahili paneller Vue veya Svelte, mobil React Native, edge functions farklı bir runtime. Headless primitive seçiminde framework desteği bu nedenle stratejik bir filtredir.

1. Sadece React stack: Radix kazanır. Daha hafif, daha olgun ekosistem, Shadcn UI’ın Radix üzerinden sağladığı geniş tema kataloğu.
2. React + Vue (örn. monolith → micro frontend geçişi): Ark UI tek tasarım dili sağlar; ekipler arası “Combobox nasıl davranır” tartışması azalır.
3. Astro + island architecture: Astro içinde React/Vue/Solid island’larını karıştırıyorsanız Ark UI çoklu adapter avantajını verir. Astro framework island modeli için Ark uygun aday.
4. Svelte 5 Runes: Radix native Svelte sağlamadığı için Ark UI Svelte adapter (zag-js/svelte) gerekli; Svelte 5 runes reaktif modeliyle iyi uyum verir.
5. Remix / RSC ağırlıklı: Radix daha test edilmiş, server boundary’lere uyumlu örnek kod tabanı daha geniş. Remix vs Next.js kıyaslamasında ikisinin de meta-framework özelliklerine değiniyoruz.

Stack	Önerilen Primitive	Sebep	Dezavantaj
Next.js + Shadcn UI	Radix	Shadcn ekosistemi, Tailwind hazır temalar	Sadece React
Nuxt + Vue 3	Ark UI	Native Vue adapter, Zag machine olgun	Bundle %25 daha büyük
SvelteKit (Svelte 5)	Ark UI	Tek alternatif (Radix yok)	Tema kataloğu sınırlı
Astro multi-framework	Ark UI	Tüm island’lar aynı state machine	Adapter switch dikkat
SolidStart	Ark UI	Solid native (Kobalte de alternatif)	Topluluk daha küçük
Remix / React Router 7	Radix	RSC ve loader pattern olgun	Tek-framework kilidi

Karar matrisi: Stack saf React ise Radix; çoklu framework veya gelecekte Vue/Svelte ihtimali varsa Ark UI. Ekosistem (Shadcn) tarafında Radix’in 2026 itibarıyla net önderliği var ama Ark UI’ın Park UI projesi hızla yakalıyor.

Ekosistem: Shadcn UI, Park UI ve Tema Katalogları

Headless primitive’i tek başına seçmek tasarım sisteminin yalnızca yarısı; üzerine bina edilecek stil katmanı (Tailwind tema + örnek bileşen kodları) ekosisteminin de değerlendirilmesi gerek. Bu noktada Shadcn UI ve Park UI iki başlıca rota.

Shadcn UI (Radix üstüne kurulu) “copy-paste component” paradigmasıyla 2024’ten beri standart hâline geldi. Bileşen kodu npm bağımlılığı değil, kullanıcının repo’suna kopyalanır; bu özelleştirme özgürlüğü ve sürüm kilidi yok. v4 sürümü Tailwind CSS 4 motoruyla uyumlu. Avantaj: hızlı başlangıç, geniş örnek katalog. Dezavantaj: tek-framework (React) ve Radix versiyonuyla kilitli.

Park UI Ark UI üzerine kurulu denkliği. 2024 sonunda başladı ve 2025’te 3.x serisinde stabil temalar sundu. Panda CSS ile entegre tasarım token sistemi var ve Tailwind hedefi de eklendi. React/Vue/Solid/Svelte için ayrı paketler. Park UI’ın güçlü yanı çoklu framework; zayıf yanı topluluk büyüklüğü (GitHub yıldızı ~2.500, Shadcn’in ~75.000’iyle kıyaslanamaz).

• Headless UI (Tailwind Labs): React + Vue desteği var ama bileşen sayısı sınırlı (Dialog, Listbox, Menu, Combobox, Switch, Disclosure, RadioGroup civarı). Tailwind ile sıkı entegre tasarım dilini benimseyen küçük projeler için yeterli olabilir.
• React Aria (Adobe): Adobe Spectrum’un altındaki hook-based primitive seti. Erişilebilirlik kapsama derinliği muhtemelen sektörün en yüksek seviyesinde ama composition API’si verbose ve öğrenme eğrisi yüksek.
• Base UI (MUI yeni): Material UI ekibinin headless yeniden yazımı; 2024’te beta, 2025’te 1.0 aday. Olgunlaşma süreci hâlâ devam ediyor; üretim için 2026 Q3-Q4’te yeniden değerlendirilebilir.
• Kobalte: SolidJS-native primitive seti, Ark UI’a alternatif. Solid kullanıyorsanız değerlendirilmeli.

Pratik tavsiye: hızlı MVP için Shadcn + Radix; uzun vadeli çoklu-framework kurumsal tasarım sistemi için Park UI + Ark UI. Bu kararı sıfırdan vermek isteyen ekipler için Ömer Önal olarak danışmanlık projelerimizde primitive seçimi audit’i ilk haftada netleştiriyoruz.

React Server Components ve Edge Runtime Uyumluluğu

React Server Components (RSC) mimarisi 2024-2025’te Next.js App Router ile yaygınlaştı ve 2026’da Remix v3, TanStack Start gibi alternatif meta-framework’ler de benimsedi. Headless primitive seçiminde RSC uyumu artık zorunlu bir kalite kriteri.

Radix’in RSC durumu: tüm interaktif primitive’ler client-only ("use client" gerektirir). Bu beklenen ve doğru bir tasarım çünkü Dialog/Popover/Menu zaten browser state’i gerektirir. Önemli olan client boundary’nin nereye konulduğu: Shadcn UI bileşenleri Radix’i kendi içinde "use client" ile sarmalar, böylece ürün geliştiricisi server component’tan rahatlıkla import edebilir. Server-side render edilen statik sayfalarda Radix tetiklenmez; sadece interactive ada hydrate olur.

Ark UI’ın RSC durumu benzer: Zag machine client tarafında çalışır ve adapter’lar "use client" ile işaretli. Vue/Solid/Svelte hedefleri zaten RSC mantığını kendi meta-framework’lerinde (Nuxt, SolidStart, SvelteKit) farklı şekilde çözer. Astro island modelinde her iki primitive de client:load veya client:idle direktifi ile çalışır.

Meta-Framework	Radix Uyum	Ark UI Uyum	Notlar
Next.js 14+ App Router	Tam	Tam	Her ikisi de “use client” gerektirir, hidrasyon optimize
Remix v2	Tam	React adapter ile tam	Loader/action pattern her ikisinde sorunsuz
Nuxt 3	Yok	Tam (Vue adapter)	Radix sadece React
SvelteKit	Yok	Tam (Svelte adapter)	Zag machine reaktif store’lara bağlanır
Astro 4+	React island olarak	Tüm island’lar	Çoklu framework için Ark daha esnek
SolidStart	Yok	Tam (Solid adapter)	Kobalte de Solid alternatifi

Edge runtime (Cloudflare Workers, Vercel Edge) tarafında her ikisi de Node.js API kullanmaz; primitive’ler tarayıcı API’lerine (ResizeObserver, IntersectionObserver) bağımlı, sorun çıkmaz.

Migration ve Gerçek Üretim Senaryoları

Migration kararı pratikte iki senaryoyla karşılaşır: (a) Material UI / Ant Design gibi opinionated kütüphaneden headless’a geçiş, (b) Radix ↔ Ark UI arası geçiş.

(a) MUI → Radix/Ark UI: Bu bir yeniden yazımdır, drop-in replacement değildir. Pratik plan: design token’ları (renk, spacing, typography) Tailwind config’e taşı → Radix/Ark primitive üzerinde bir DesignSystem paketi yaz → bileşen bileşen değiştir. Tipik süre 6-12 hafta küçük takım için, 3-6 ay kurumsal monorepo için. Net kazanım: bundle %40-60 düşer, Lighthouse skoru artar, tema değişikliği design system seviyesinde tek seferde yapılabilir.

(b) Radix → Ark UI veya tersi: Composition API’leri farklı (Radix slot pattern vs Ark UI hook + props). Bileşen başına ortalama 2-4 saatlik refactor. Karar: tek framework hedefliyorsanız geçişe gerek yok; Vue/Svelte eklenecekse Ark UI’a kademeli geçiş mantıklı (yeni feature’larda Ark, eskileri Radix’te bırak, zamanla migrate).

1. Ne zaman Radix seç: Saf React stack, Shadcn UI veya Tailwind ekosistemiyle hızlı başlangıç, kurumsal Shadcn template kullanımı, RSC ağırlıklı uygulama.
2. Ne zaman Ark UI seç: Çoklu framework (React + Vue + Solid + Svelte), Date Picker / Tour / Signature Pad gibi advanced primitive ihtiyacı, Zag state machine determinizmiyle test edilebilirlik önceliği.
3. Ne zaman ikisini de seçme: Static marketing site (Astro + HTMX yeter), büyük complex grid/data visualization ağırlıklı uygulama (TanStack Table + AG Grid daha uygun), enterprise Spectrum-grade erişilebilirlik (React Aria).
4. Hybrid yaklaşım: Ana ürün Radix + Shadcn, marketing site Astro + Ark UI Vue island’ları — gerçek ürün takımlarında gördüğümüz pragmatik patern.

Üretim senaryosu örneği: Linear, Cal.com ve Vercel dashboard Radix kullanır. Vue tarafında Ark UI Polypane ve Mailchain projelerinde production’da. Önemli: hiçbir primitive seçimi geri dönüşsüz değil; bileşen başına refactor maliyeti kabul edilebilir aralıkta. Detay analizler için HTMX hypermedia alternatif yaklaşımını da değerlendirebilirsiniz.

Sıkça Sorulan Sorular

Sonuç

Radix UI ve Ark UI 2026 headless primitive ekosisteminin iki olgun temsilcisi ve karar genelde framework matrisine bağlı: saf React ve Shadcn UI ekosistemini kullanacaksanız Radix daha hafif, daha geniş tema kataloğu ve daha test edilmiş bir tabandır; çoklu framework (Vue, Solid, Svelte) veya gelecekte stack çeşitlenmesi varsa Ark UI Zag state machine determinizmi ve adapter çoklu desteğiyle stratejik kazanım sağlar.

Karar çerçevesi pratik olarak şu üç soru: (1) Stack tek framework mi yoksa çoklu mu? (2) Shadcn UI tema kataloğunu kullanacak mıyız yoksa kendi tasarım sistemi mi yazacağız? (3) Date Picker / Tour / Signature Pad gibi advanced primitive’lere ihtiyaç var mı? Birinci ve ikinci sorulara “tek React + Shadcn” yanıtı verirseniz Radix; “Vue/Svelte/Solid ekleyebiliriz, advanced primitive lazım” yanıtı verirseniz Ark UI.

Migration kararı sıfırdan yeniden yazım değil — bileşen başına 2-4 saatlik kademeli refactor mümkün ve gerçek ürün takımlarında hybrid yaklaşım (ana ürün Radix, marketing Ark UI Vue island) yaygın. Tasarım sistemi audit’i ve primitive seçimi konusunda derin bir karar matrisi çıkarmak için iletişim sayfası üzerinden danışmanlık talep edebilir, projenize özel bundle hedefi ve framework yol haritası planlayabilirsiniz.

Dış kaynak okuma önerileri: Radix UI Primitives resmi dokümantasyonu, Ark UI resmi sitesi, Zag.js state machine dokümantasyonu, WAI-ARIA Authoring Practices 1.2, web.dev INP rehberi, Shadcn UI GitHub reposu ve State of JS 2024 anketi primitive ve framework seçimi için güncel veriler sağlar.