---
title: Shadcn UI
category: product
entity_type: skill
price: ₺369
canonical: https://forgehouse.ai/tr/skiller/shadcn-ui/
lang: tr
hreflang_alt: https://forgehouse.ai/skills/shadcn-ui/
last_updated: 2026-06-20
---

# Shadcn UI

> Build accessible, customizable UI components using shadcn/ui with Radix primitives, Tailwind…

shadcn/ui ile erişilebilir ve markaya uygun arayüz inşa edin: Radix primitive'leri, Tailwind CSS ve class-variance-authority, component'lerin node_modules'a değil doğrudan reponuza kopyalandığı copy-paste mimarisiyle bir araya gelir. Her component sizin olduğu için upstream kırıcı değişiklikler size dokunamaz, kullanılmayan component'ler bundle'ı şişirmez. Tema token'larından RSC sınırlarına kadar, hızlıca tutarlı bir component kütüphanesi yayına almanız için disiplinli bir yol sunar.

## Ne için kullanılır
- Next.js veya Vite projesine shadcn component'i ekleme
- CSS değişkenleri ve karanlık mod ile tema sistemi kurma
- react-hook-form ve zod ile form yapıları kurma
- Doğru RSC ve 'use client' sınırını çizme
- DataTable, Combobox ve DatePicker bileşik component'leri oluşturma
- Token'ları component koduna dokunmadan müşteri markasına uyarlama

## Faydalar
- Her component'in tam sahipliği: upstream kırıcı değişiklik riski yok
- Erişilebilirliği Radix sağlar: klavye gezinme, focus trap, ekran okuyucu rolleri
- Tek dosyada CSS değişkenlerini değiştirerek tüm marka görünümünü değiştirin
- Daha küçük bundle: yalnızca eklediğiniz component'ler yayına çıkar

## Ne içerir
- CLI iş akışı: init, add, --all, --overwrite ve upstream ile diff
- Tip-güvenli varyantlar ve çatışmasız Tailwind birleştirme için CVA + cn() pattern'i
- Üç katmanlı tema token hiyerarşisi (CSS değişkenleri → Tailwind config → CVA varyantları)
- 50+ component'in kategoriye göre RSC-uyumluluk matrisi
- Geçersiz iç içe HTML'i önlemek için asChild Slot pattern rehberi
- Anti-pattern kataloğu ve entegrasyon sonrası doğrulama kontrol listesi

## Kimler için
Next.js + React + Tailwind stack'inde, tam kontrol ettikleri erişilebilir ve temalanabilir bir component kütüphanesi isteyen frontend ekipleri için.

## Nasıl çalışır
Skill, kodun projeye kopyalandığı ve sahipliğin projede kaldığı shadcn/ui üzerinde component kütüphanesi kurarken fiilen şu döngüyü çalıştırır, kara kutu yok:
1. Hiçbir şeye dokunmadan önce projeyi değerlendirir: components.json var mı, hangi stil seçili (new-york veya default), components/ui altında şu an ne yaşıyor, globals.css'te tema token'ları tanımlı mı.
2. Sadece gereken bileşenleri CLI ile ekler (npx shadcn add button card dialog), --all bayrağı asla kullanılmaz; copy-paste mimaride kaynak kod projeye iner ve kullanılmayan bileşen bundle'ı şişirmez.
3. Radix primitive'lerinin üstüne shadcn sarmalayıcıları ile inşa eder; ARIA rolleri, klavye navigasyonu ve focus trap elle yazılıp kaçınılmaz şekilde atlanmak yerine doğru varsayılan olarak gelir.
4. Varyantları cva() ile tanımlar, sınıfları cn() yardımcısıyla (clsx artı tailwind-merge) birleştirir; çakışan Tailwind sınıfları öngörülebilir çözülür, string birleştirme kod tabanına hiç girmez.
5. Müşterinin markasını globals.css'te HSL CSS değişkenlerine ve .dark override bloğuna haritalar; sabit hex renk yasaktır, böylece tam marka değişimi component yeniden yazımı değil token değişimi olur.
6. Doğrulama kontrol listesiyle kapanır: RSC sınırları doğru çizilmiş mi (overlay'ler client, statik kısımlar server), asChild link-içinde-buton gibi geçersiz iç içe HTML'i önlüyor mu, koyu mod geçişi, klavye navigasyonu ve ekran okuyucu testi geçiyor mu.

## Sık sorulanlar
### Vue ve düz CSS kullanıyoruz; bu paket bize uyar mı?
React ve Tailwind yığınını hedefler, Next.js veya Vite üzerinde. shadcn/ui bileşenleri Tailwind ile stillenen React kodudur ve varyantlar class-variance-authority üzerine kuruludur. Bu yığının dışında desenler taşınmaz.

### Kendim npx shadcn add çalıştırmaktan fazlası ne?
CLI bileşeni projeye getirir; bu paket sonrasında kırılanları kapsar. 50'den fazla bileşen için RSC ve 'use client' sınır matrisi, geçersiz iç içe HTML'i önleyen asChild Slot deseni, üç katmanlı tema token hiyerarşisi ve upstream değişikliklerine karşı diff akışı sunar.

### Kendini güncelleyen, barındırılan bir bileşen kütüphanesi mi bu?
Hayır. Kopyala-yapıştır mimarisi bilinçli olarak tam tersi: bileşenler sizin reponuzda yaşar ve asla kendiliğinden güncellenmez, upstream kırıcı değişiklikler size dokunamaz. Upstream iyileştirmelerini almak bilinçli bir diff ve merge kararıdır.

## Fiyat
₺369, tek seferlik, abonelik yok. KDV dahil.

İlgili rehber: [Yapay zekâ ile tasarım sistemi](https://forgehouse.ai/tr/rehberler/yapay-zeka-ile-tasarim-sistemi/)