72Başlayın

HextaUI ve shadcn/ui

HextaUI, shadcn/ui’ın yerine geçmez. Bir shadcn/ui projesine eklediğiniz, aynı CLI’ı, aynı bileşen adlarını ve aynı tema token’larını kullanan bir registry’dir. Bu sayfa neler eklediğini ve ne zaman gerekmediğini açıklar.

Kısa cevap

Temiz bir başlangıç noktası istiyorsanız ve yükleme, hata ve boş durumlarını kendiniz yazmayı planlıyorsanız shadcn/ui’ı kullanın. Bu durumların, hareketin ve erişilebilirlik ayrıntılarının hazır olmasını istiyorsanız ya da shadcn/ui’ın sunmadığı bir bileşene ihtiyacınız varsa HextaUI’ı ekleyin. İkisini bir projede, bileşen bileşen karıştırabilirsiniz.

Neler aynı kalır

  • shadcn CLI ile kurarsınız ve kaynak kod projenize kopyalanır. Hiçbir şey bir paketin içine kilitlenmez.
  • Bileşenler shadcn/ui’ın adlarını, parçalarını ve prop’larını korur; bu yüzden Dialog, DialogTrigger ve DialogContent beklediğiniz gibi çalışır.
  • Stil, Tailwind CSS v4 ile --background, --primary ve --radius gibi aynı tema token’larını kullanır.
  • Dosyalar, zaten sahip olduğunuz shadcn/ui bileşenlerinin yanında @/components/ui içine eklenir.

Bir bileşen eklemek şöyle görünür:

pnpm dlx shadcn@latest add https://hextaui.com/r/button.json

HextaUI neler ekler

  • Tamamlanmış durumlar. Düğmeler, döndürdüğünüz promise’e göre beklemede, başarı ve hata geri bildirimi gösterir. Switch’ler kaydeder ve geri alır. Input’lar geçersiz olduklarında sallanır. Spinner’lar görünmeden önce bekler, böylece hızlı işlemler yanıp sönmez.
  • Kesilebilen hareket. Animasyonlar tek bir easing eğrisi ve süre setini paylaşır, yarıda tersine çevrilebilir ve azaltılmış hareket açıkken yumuşak bir geçişe (fade) dönüşür.
  • Dokunmatik, sağdan sola ve yüksek kontrast. Dokunmatik ekranlarda hedef alanlar büyür, metin input’ları iOS yakınlaştırmasın diye 16px’te kalır, düzenler sağdan sola yazılan diller için aynalanır ve odak halkaları Windows yüksek kontrast modunda görünür kalır.
  • Bu yazının hazırlandığı sırada (Ekim 2026) shadcn/ui listesinde bulunmayan bileşenler, örneğin Tree, Video player, Questionnaire, Number flow, Shimmer ve Scroll fade.
  • useButtonFeedback ve useDelayedLoading gibi, tek başına kurabileceğiniz 9 hook ve 5 yardımcı fonksiyon.
  • Yapay zekâ ürünleri için sohbet akışı, araç çağrıları ve ses modu gibi 22 blok. Bunlar ücretli olan HextaUI Pro’nun parçasıdır; Prompt Input ise ücretsizdir.
  • Ajanlar için de yazılmış dokümantasyon. Her sayfanın bir Markdown sürümü vardır ve asistanınızın sorgulayabileceği bir MCP sunucusu bulunur.

Yalnızca shadcn/ui’ın daha iyi olduğu durumlar

  • Radix primitive’lerini istiyorsunuz. HextaUI bileşenleri yalnızca Base UI üzerine kuruludur.
  • Mümkün olan en küçük bileşeni istiyorsunuz ve durumları ile hareketi kendiniz eklemeyi tercih ediyorsunuz. HextaUI bileşenleri daha fazla durumu ele aldığı için daha fazla kod içerir.
  • shadcn/ui blokları, grafikleri ve temalarına ya da topluluğun Vue ve Svelte port’larına bağımlısınız. HextaUI yalnızca React içindir.
  • En büyük topluluğa ve en çok üçüncü taraf örneğine ihtiyacınız var. shadcn/ui her ikisinde de çok daha fazlasına sahiptir.

İkisini birlikte kullanmak

İsimler ve token’lar eşleştiği için bileşenleri tek tek değiştirebilirsiniz. Bir shadcn/ui bileşenini HextaUI sürümüyle değiştirmek için add komutunu --overwrite ile çalıştırın, ardından tutmadan önce diff’i git’te inceleyin. Değiştirmediğiniz bileşenler çalışmaya devam eder. HextaUI’da 65 bileşen vardır ve Kurulum sayfası bu bileşenlerin beklediği tema token’larını açıklar.