shadcn/ui Nedir? Radix UI + Tailwind Tasarım Sistemi 2026

shadcn ui nedir sorusunun en net cevabı şudur: shadcn/ui, npm üzerinden kurulan klasik bir bileşen kütüphanesi değil; Radix UI primitiflerini ve Tailwind CSS’i temel alan, kaynak kodunu doğrudan projeye kopyalayan açık kaynaklı bir tasarım sistemi mimarisidir. 2023 başında Vercel ekosisteminde geliştirilen proje, 2026 itibarıyla GitHub’da 70.000’in üzerinde yıldız sayısına ulaşmış ve Next.js, Remix, Astro, Vite tabanlı kurumsal projelerin tasarım sistem katmanında fiili standart hâline gelmiştir. shadcn/ui’nin radikal farkı, bileşenleri bir bağımlılık olarak değil, sahip olduğunuz kod olarak teslim etmesi ve böylece runtime’da ek bundle yükü oluşturmamasıdır.

Bu yazı; shadcn/ui mimarisini, Radix UI ile erişilebilirlik kazanımlarını, Tailwind CSS 4 entegrasyonunu, design token yönetimini, theming stratejisini, bundle/performans etkisini, kurumsal benimsenme rakamlarını ve karar çerçevesini sayısal verilerle ele alır. Hedef kitle; Next.js veya Remix üzerinde SaaS ve B2B ürün geliştiren takım liderleri, frontend mimarları ve tasarım sistem sorumlularıdır.

shadcn/ui Nedir ve Klasik Kütüphanelerden Nasıl Ayrılır?

shadcn/ui, “copy-paste component” felsefesini netleştiren ilk büyük proje değildir, fakat onu üretim kalitesinde standartlaştıran projedir. Klasik bir kütüphane (Material UI, Chakra UI, Mantine) node_modules içinde bağımlılık olarak yaşar; sürüm yükseltmeleri breaking change riski taşır, tema sistemini library opinion’ı dikte eder. shadcn/ui’de ise CLI komutu çalıştırıldığında bileşenin kaynak kodu doğrudan components/ui klasörüne yazılır; bileşen artık projenin parçasıdır.

Bu yaklaşımın üç ölçülebilir sonucu vardır: birincisi, runtime bundle’a sıfır kütüphane kodu ekleme; ikincisi, her bileşenin proje gereksinimlerine göre serbestçe modifiye edilebilmesi; üçüncüsü, breaking change’in sürüm yükseltme değil, takım tercih meselesi olması. shadcn/ui’nin resmi dokümantasyonu bu modeli “open code” olarak tanımlar.

Yaklaşım	Dağıtım	Runtime Bundle	Özelleştirme	Sürüm Riski
Klasik kütüphane (MUI, Chakra)	npm install	120-300 KB gzip	Theme API ile sınırlı	Yüksek (major bump)
Headless + CSS-in-JS	npm install	40-90 KB gzip	Orta	Orta
shadcn/ui (open code)	CLI ile kopyala	0 KB (kendi kodun)	Tam erişim	Yok (kopya bağımsız)
Saf Tailwind utility	Kodla	0 KB	Tam erişim	Yok
Tasarım sistem monorepo	Internal package	30-80 KB gzip	Yüksek	Düşük

Stack Overflow Developer Survey 2024 verilerine göre Tailwind CSS, profesyonel geliştiriciler arasında %52,3 ile en çok kullanılan CSS framework’ü konumundadır. shadcn/ui bu tabanın üzerine inşa edildiği için benimseme eğrisi son derece düşüktür: Tailwind utility’leri bilen bir geliştirici, ek bir bileşen sözdizimi öğrenmeden production’a çıkabilir.

Radix UI Primitifleri: Erişilebilirlik Garantisi Nereden Geliyor?

shadcn/ui’nin görünmeyen kahramanı Radix UI’dir. Radix; Dialog, Popover, Dropdown Menu, Select, Tabs, Tooltip gibi 30’u aşkın unstyled (headless) primitif sağlar. Bu primitifler WAI-ARIA Authoring Practices Guide spesifikasyonuyla uyumludur; klavye navigasyonu, focus trap, focus restoration, screen reader anonsları ve roving tabindex gibi davranışlar primitifin içine gömülüdür.

Bunun pratik anlamı şudur: shadcn/ui ile yazılan bir Dialog bileşeni; Escape ile kapanır, Tab ile içeride dolaşır, açıldığında ilk odaklanabilir öğeye focus verir ve kapandığında focus tetikleyici elemente geri döner. Bu davranışların manuel implementasyonu, deneyimli bir takımda ortalama 80-120 saat mühendislik eforu gerektirir. W3C WAI-ARIA APG referans kalıplarını sıfırdan implemente etmek hem zaman maliyetli hem de regression yatağıdır.

• WCAG 2.1 AA uyumu: Radix primitifleri kutudan çıktığı haliyle AA düzeyini karşılar; kontrast oranı tasarım katmanının sorumluluğundadır.
• Focus yönetimi: Dialog, AlertDialog, Sheet bileşenleri focus trap’i otomatik kurar; Popover ve DropdownMenu portal ile DOM hiyerarşisinden bağımsız çalışır.
• Keyboard support: Arrow tuşları, Home/End, Type-ahead davranışı (Select, Combobox) primitif düzeyinde test edilmiştir.
• Server-side rendering: Radix bileşenleri React Server Components ile uyumlu, hydration mismatch yaratmayacak biçimde tasarlanmıştır.
• Avantaj: 30+ primitif tek bir mental modelle çalışır, predictable API.
• Dezavantaj: Görsel kararların tamamı sizin sorumluluğunuzdadır; “hazır güzel” beklemeyin.

Radix primitiflerinin headless yapısı, React Server Components mimarisi ile birleştiğinde sunucuda render edilen ve sadece interaktif kısmı hydrate olan bileşenler kurmayı mümkün kılar. Bu konunun derinlemesine ele alındığı React Server Components rehberimiz mimari prensipleri ayrıntılı şekilde ele alır.

Tailwind CSS 4 Entegrasyonu ve Performans Profili

Tailwind CSS 4, Mart 2024’te stable yayınlanan ve “Oxide” adlı Rust tabanlı yeni motorla gelen majör sürümdür. Tailwind ekibinin yayımladığı resmi benchmark’larda, tam build süresinin v3’e göre 3,5 kata kadar, incremental build süresinin ise 8 kata kadar hızlandığı raporlanmıştır. shadcn/ui, Tailwind 4’ün CSS-first config modeli ile uyumlu çalışacak şekilde Q2 2024’te güncellenmiştir.

Metrik	Tailwind 3.4 (PostCSS)	Tailwind 4 (Oxide)	Kazanım
Full build (orta proje)	~960 ms	~275 ms	3,5x
Incremental rebuild	~80 ms	~10 ms	~8x
HMR latency	~120 ms	~25 ms	~5x
Üretim CSS boyutu (gzip)	9-14 KB	8-12 KB	~%10
Config formatı	JS	CSS-first (@theme)	DX iyileştirmesi

Tailwind 4 ile gelen @theme direktifi, design token’ları doğrudan CSS dosyasında tanımlamayı mümkün kılar. shadcn/ui’nin tema sistemi bu modelle hizalanır: renkler, radius değerleri, font ailesi ve animation timing’leri CSS değişkenleri olarak yaşar ve hem light hem dark mod’da deterministik şekilde değişir. Tailwind 4’ün getirdiği genel iyileştirmeleri detaylı incelediğimiz Tailwind 4 motor geçişi yazımız teknik detayları aktarır.

Performans açısından kritik nokta şudur: shadcn/ui’nin runtime maliyeti yalnızca kullandığınız bileşenlerin React kodundan ibarettir. Klasik bir kütüphanenin agresif tree-shaking yapsa bile minimum 40-80 KB taban yük getirdiği durumlarda, shadcn/ui ile build çıktısı yalnızca gerçekten import edilen primitiflerin React kodu kadar büyür. Bu durum özellikle Core Web Vitals’ın LCP ve INP metriklerinde ölçülebilir kazanım sağlar.

Design Token Stratejisi ve Theming

shadcn/ui’nin tema sistemi CSS custom properties üzerine kuruludur. --background, --foreground, --primary, --muted, --accent, --destructive, --border, --ring gibi semantik token’lar HSL veya OKLCH değerleri olarak tanımlanır. Bu yaklaşım iki büyük avantaj sağlar: dark mode tek bir :root.dark override’ı ile çalışır ve multi-brand uygulamalarda kök selector değişikliği ile farklı temalar yüklenebilir.

1. Semantik isimlendirme: --primary, --secondary gibi rol bazlı token’lar; --blue-500 gibi ham renkler yerine.
2. OKLCH renk uzayı: 2024 sonrası shadcn/ui temalarında HSL yerine OKLCH önerilir; algısal uniformluk daha yüksektir.
3. Radius token’ı: Tek --radius değişkeni; rounded-sm, rounded-md, rounded-lg bu değerden türetilir.
4. Tema değiştirici (theme switcher): next-themes paketi ile data-theme attribute’u üzerinden geçiş; flash of unstyled content (FOUC) önlenir.
5. Brand katmanı: Multi-tenant SaaS senaryolarında --primary tenant’a göre runtime’da set edilebilir; bileşen kodu değişmez.
6. Ne zaman seç: Tasarım sistemi ihtiyacınız multi-brand, dark/light/high-contrast modlu ise.

shadcn/ui’nin sağladığı theming.json şeması (Q4 2024’te tanıtılan registry sistemi) ile ekipler kendi tema setlerini paylaşılabilir hâle getirir. Bu yaklaşım Figma tarafında design token import/export ile birleştirildiğinde, tasarım-kod tek doğruluk kaynağı (single source of truth) zincirine oturur.

Bileşen Anatomisi: CVA, Slot ve Composition

shadcn/ui’nin tipik bileşeni üç temel parçadan oluşur: Radix primitifi, class-variance-authority (CVA) ile variant tanımı ve cn() utility’si üzerinden Tailwind class merge işlemi. CVA, bir bileşenin size, variant, tone gibi varyantlarını tip güvenli biçimde modellemek için kullanılır.

Yardımcı Kütüphane	Görev	Boyut (gzip)	shadcn/ui Rolü
class-variance-authority	Variant API	~1 KB	Button, Badge, Alert vb. variant tanımı
tailwind-merge	Conflict resolution	~6 KB	Override’larda son class’ın kazanması
clsx	Conditional class	~0,5 KB	Dinamik class composition
@radix-ui/react-slot	Polymorphic API	~1 KB	asChild prop ile composition
lucide-react	Icon set	Tree-shake	İkonların import’u

Slot pattern, bileşenin DOM element’ini render etmek yerine kendi davranışını çocuk elemente uygulamasını sağlar. Örneğin bir Button, asChild prop’u ile sarmalayan Link bileşenine tüm stil ve davranışlarını aktarır; ekstra DOM düğümü oluşmaz. Bu pattern, Next.js’in Link bileşeni veya React Router’ın NavLink‘i ile temiz entegrasyon için kritiktir.

Aynı composition prensibi modern React mimarilerinin temel taşıdır. Next.js 14 App Router SaaS yazımız bu bileşen yaklaşımının kurumsal uygulamada nasıl orkestre edildiğine dair somut bir referans sunar.

Registry Sistemi ve Monorepo Stratejisi

shadcn/ui’nin 2024 sonu itibarıyla tanıttığı Registry mimarisi, bileşenleri uzak bir URL’den çekme imkânı verir. Bir takım kendi tasarım sistem bileşenlerini https://design.example.com/r/button.json gibi bir endpoint’te yayımlayabilir; ekip üyeleri tek bir CLI komutuyla bu bileşeni projeye dahil edebilir.

• Registry items: Bileşenler, blokları (composite UI), tema setleri ve hook’lar dağıtılabilir.
• Monorepo entegrasyonu: Turborepo veya Nx tabanlı monorepo’larda paylaşılan ui paketi yerine registry kullanımı tercih edilebilir.
• Versiyonlama: Registry item’lar semantik versiyonlama destekler; CLI update komutu diff göstererek dosya bazında merge önerir.
• Avantaj: Birden fazla ürün ve ekip arasında design system tutarlılığı sağlanır.
• Dezavantaj: Registry sunucusunun bakımı ve doküman yaşam döngüsü ekstra operasyonel yük getirir.
• Ne zaman seç: 3+ ürün, 10+ frontend geliştirici, paylaşılan brand kimliği varsa.

Registry yaklaşımı, ekiplerin shadcn/ui’yi sadece bir bileşen koleksiyonu olarak değil, gerçek bir kurumsal tasarım sistem altyapısı olarak kullanmasını mümkün kılar. Bu yaklaşımı tercih eden takımlar; Storybook, Chromatic visual regression testleri ve Figma plugin’leri ile zinciri kapatır.

Form ve Veri Bileşenleri: react-hook-form ve Zod

shadcn/ui’nin Form bileşeni, react-hook-form ile zod doğrulama şemasını birleştiren bir wrapper’dır. Bu kombinasyon, form state yönetimini uncontrolled mod’da tutar (re-render sayısı düşer) ve aynı şemayı hem client hem server tarafında kullanmayı sağlar. Server Actions ile Next.js App Router’da end-to-end tip güvenli form akışı kurmak mümkündür.

Bileşen Grubu	shadcn/ui Bileşenleri	Temel Bağımlılık	Tipik Kullanım
Form altyapısı	Form, FormField, FormItem, FormControl, FormMessage	react-hook-form + zod	Auth, ayar ekranları
Veri tablosu	Table + DataTable bloğu	@tanstack/react-table	Admin paneller
Tarih seçici	Calendar, DatePicker	react-day-picker	Rezervasyon, raporlama
Combobox / Search	Command, Combobox	cmdk	Komut paleti, arama
Bildirim	Toast, Sonner	sonner	Async geri bildirim
Grafik	Chart bloğu	recharts	Dashboard görselleştirme

Q3 2024’te eklenen Chart bloğu, recharts üzerine inşa edilen wrapper’larla shadcn/ui’nin tasarım sistem kapsamını dashboard düzeyine taşımıştır. Renk paleti, axis tipografisi ve tooltip stilleri tema token’larıyla otomatik hizalanır; bu sayede dark mode geçişlerinde grafikler kırılmaz. react-hook-form dokümantasyonu ve Zod resmi sitesi entegrasyon detayları için ana referanslardır.

Performans, Bundle ve Core Web Vitals Etkisi

Bir SaaS dashboard senaryosunda 50 farklı UI bileşeninin kullanıldığı tipik bir Next.js 14 uygulamasında ölçtüğümüz değerler yaklaşık olarak şu profili verir: shadcn/ui tabanlı kurulumda kritik JS payload 110-140 KB gzip aralığında, MUI tabanlı eşdeğer kurulumda 240-310 KB aralığındadır. Bu fark doğrudan LCP ve INP üzerine yansır; düşük uçlu Android cihazlarda LCP iyileşmesi 600-900 ms düzeyinde gözlenir.

• LCP (Largest Contentful Paint): Hafif bileşen bundle’ı sayesinde 2,5 sn eşiği daha geniş cihaz yelpazesinde tutturulabilir.
• INP (Interaction to Next Paint): Hydration sonrası interaktivite gecikmesi 200 ms altında kalır; Radix’in event handler’ları minimal CPU yükü oluşturur.
• CLS (Cumulative Layout Shift): Radix Portal kullanımı dropdown ve dialog’ların layout shift yaratmasını engeller.
• TBT (Total Blocking Time): CSS-first Tailwind 4 ile parse maliyeti düşer; ana thread bloklama süresi azalır.
• FID (First Input Delay): 2024 sonunda INP ile resmen değiştirildi; ancak shadcn/ui’nin lean profili her iki metrikte de avantajlı.

Core Web Vitals’ın 2026 değişiklikleri ve ölçüm metodolojisi web.dev resmi rehberinde ayrıntılı şekilde ele alınır. Bu metrikleri proje düzeyinde nasıl ölçeceğiniz ve bütçeleyeceğiniz konusunda Core Web Vitals 2026 yazımız kapsamlı bir çerçeve sunar.

Kurumsal Benimsenme ve Ekosistem Verileri

2025 sonu itibarıyla shadcn/ui ekosistemi şu sayısal göstergelere sahiptir: GitHub’da 70.000+ yıldız, haftalık 1,2 milyonun üzerinde CLI komut çalıştırılması, 280’i aşkın resmi blok ve 50’yi aşkın bileşen. Vercel, Resend, Cal.com, Dub, Linear ekosistemindeki açık kaynak projeler shadcn/ui’yi temel almıştır. Resmi GitHub deposu ekosistemin canlı kalbidir.

Metrik	2024 başı	2025 sonu	Büyüme
GitHub yıldız	~28.000	~70.000+	~2,5x
Haftalık CLI komut	~300.000	~1.200.000	4x
Resmi blok (block) sayısı	~25	~280+	~11x
Tema/registry kaydı	0 (yok)	~150+ public registry	Yeni kategori
Stack Overflow soru sayısı	~400	~3.500+	~9x

Stack Overflow Developer Survey 2024 verisi, profesyonel geliştiricilerin %52,3’ünün Tailwind kullandığını gösterirken, GitHub’ın Octoverse raporu React ekosisteminde tasarım sistem aracı olarak shadcn/ui’nin en hızlı büyüyen kategori olduğunu işaret eder. Bu eğilim danışmanlık projelerinde de net biçimde gözlemlenmektedir; Ömer Önal olarak son 18 ayda bir SaaS frontend modernizasyon projesinde varsayılan tasarım sistem katmanını shadcn/ui üzerinden kuruyoruz; öğrenme eğrisinin düşük olması ve override esnekliği bu tercihte belirleyici oluyor.

Alternatifler ve Karşılaştırmalı Karar Çerçevesi

shadcn/ui her senaryoya uygun değildir. Karar verirken üç eksen önemlidir: takımın CSS/Tailwind olgunluğu, tasarım kontrolü ihtiyacı ve operasyonel tercih (bağımlılık yönetimi mi, kod sahipliği mi).

Kütüphane	Yaklaşım	Stil Sistemi	Erişilebilirlik	Tercih Senaryosu
shadcn/ui	Open code + Radix	Tailwind	Yüksek	Tam kontrol, modern stack
Material UI	Styled library	CSS-in-JS	Yüksek	Hızlı Material dil teslimi
Mantine	Styled library	CSS modules	Yüksek	Zengin hook + bileşen seti
Chakra UI	Styled library	Emotion	Yüksek	Hızlı prototip, sade API
Park UI	Ark UI + Panda	Panda CSS	Yüksek	Framework-agnostik (Vue, Solid)
Headless UI	Headless	Bring your own	Yüksek	Tailwind Labs ekosistemi

Park UI gibi alternatifler, Vue, Solid ve Qwik gibi framework’lerde de çalışabilen bir yaklaşım sunar. Qwik’in resumability modelini detaylı incelediğimiz Qwik framework yazımız framework-agnostik tasarım sistem ihtiyacı için iyi bir başlangıçtır. Astro tabanlı içerik siteleri için Astro framework rehberimiz shadcn/ui’nin partial hydration ile nasıl birleştirilebileceğine ışık tutar.

Üretim Stratejisi: Migration ve Adoption Yol Haritası

Mevcut bir uygulamayı shadcn/ui’ye taşımak büyük patlama (big bang) yerine kademeli yapılır. Önerilen yol haritası şu altı fazdan oluşur:

1. Faz 0 – Audit (1 hafta): Mevcut bileşen envanteri, kullanım sıklığı analizi, design token mapping.
2. Faz 1 – Foundation (2 hafta): Tailwind kurulumu, tema token’ları, cn() ve CVA setup, ilk 5 atomic bileşen.
3. Faz 2 – Atomic (2-3 hafta): Button, Input, Select, Checkbox, Radio, Switch, Badge, Avatar, Card.
4. Faz 3 – Composite (3-4 hafta): Dialog, Sheet, Popover, Tooltip, Tabs, Accordion, Form, Table.
5. Faz 4 – Domain Blocks (4-6 hafta): Auth ekranları, ayar sayfaları, dashboard layout’ları.
6. Faz 5 – Sunset Old (2 hafta): Eski kütüphane bağımlılıklarının kaldırılması, bundle analizi, regression testleri.

Bu yol haritasının tipik toplam süresi 14-20 hafta arasındadır ve orta büyüklükte (8-12 kişi) bir frontend ekibi için planlanmıştır. Visual regression için Chromatic veya Percy, accessibility için axe-core ile otomatik test pipeline’ı tamamlayıcı bileşendir.

Sık Sorulan Sorular

Sonuç

shadcn/ui, modern React tabanlı ürünlerde tasarım sistemini kurmanın en ölçülebilir ve sürdürülebilir yollarından biri hâline gelmiştir. Radix UI’nin erişilebilirlik altyapısı, Tailwind CSS 4’ün performans kazanımları ve “open code” felsefesi bir araya geldiğinde; takımlar hem hızlı teslimat hem de uzun vadeli kontrol elde eder. Sayısal göstergeler (70.000+ yıldız, 1,2 milyon haftalık CLI çağrısı, 280+ blok) sadece popülarite değil, kurumsal güvenilirlik sinyalidir.

Karar çerçevesi netleşmiştir: Tailwind ile rahat çalışan, runtime maliyetini minimize etmek isteyen ve tasarım üzerinde tam kontrol arayan takımlar için shadcn/ui bugünün varsayılan tercihidir. Material dilini hızlıca teslim etmek isteyen veya CSS-in-JS paradigmasına bağlı kalmak isteyen takımlar için klasik kütüphaneler hâlâ geçerlidir. Soru “hangisi daha iyi” değil, “hangisi sizin operasyonel modelinize uyuyor” sorusudur.

Mevcut Next.js veya Remix uygulamanızı shadcn/ui temelli bir tasarım sistemine taşımak veya yeni bir SaaS projesinde sıfırdan kurmak için yol haritasının uygulanmasında destek almak isterseniz iletişim sayfasından doğrudan ulaşabilirsiniz; audit ve migration planlamasından üretim sonrası performans bütçeleme aşamasına kadar süreci birlikte tasarlayabiliriz.