Giriş

HextaUI nedir

HextaUI, React için 65 bileşen, 9 hook ve 5 yardımcıdan oluşan bir koleksiyondur. Onları shadcn CLI ile eklersiniz, kaynak kod projenize iner ve bundan sonra okuyup değiştirebileceğiniz sizin kodunuz olur.

Her bileşen zaten bildiğiniz shadcn/ui API'sini korur. Fark, aksi halde kendinizin yapacağı işte yatar: durumlar, uç durumlar ve bir arayüzü tamamlanmış hissettiren küçük ayrıntılar.

Hızlı başlangıç

shadcn/ui ile kurulmuş bir projede bir bileşen ekleyin:

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

Sonra @/components/ui içinden içe aktarın.

import { Button } from "@/components/ui/button"

export function SaveButton() {
  return (
    <Button feedback onClick={() => saveSettings()}>
      Save changes
    </Button>
  )
}

Gereksinimler, her şeyi bir kerede eklemek ve @hextaui namespace'i Kurulum bölümünde ele alınır.

Neler elde edersiniz

Bunlar her bileşen için geçerlidir; bu yüzden her birini ayrı ayrı denetlemeniz gerekmez.

Hareket

Animasyonlar temanın easing eğrilerini kullanır ve yarıda kesilip tersine çevrilebilir. Azaltılmış hareket açıkken hareket basit bir solmaya dönüşür.

Klavye ve ekran okuyucular

Her şey yalnızca klavyeyle çalışır ve popup'lar açılıp kapanırken odak beklediğiniz yere gider. Değişiklikler de duyurulur: toast'lar, yükleme ve kaydedildi durumları, seçimler ve slayt değişiklikleri.

Dokunmatik ve küçük ekranlar

Dokunmatik ekranlarda dokunma hedefleri büyür, metin girdileri iOS yakınlaştırmasın diye 16px'te kalır ve popup'lar 320px genişliğe kadar ekranda kalır. Düzenler sağdan sola diller için yansıtılır.

Yüksek kontrast

Odak halkaları, kontrol kenarları ve seçili durumlar Windows yüksek kontrast modunda görünür kalır ve varsayılan tema açık ve koyu modda WCAG AA kontrastını karşılar.

Üzerine kurulu

• base-vega stiliyle shadcn/ui
• Davranış ve erişilebilirlik için Base UI primitive'leri
• Renk, yarıçap ve easing için tema token'ları olan Tailwind CSS v4
• Tabler simgeleri

AI asistanları

Her sayfanın bir Markdown sürümü vardır ve /llms.txt hepsini listeler. MCP'yi destekleyen asistanlar belgelerde arama yapmak, bileşen API'lerini okumak ve kurulum komutlarını almak için HextaUI MCP sunucusuna bağlanabilir.

Lisans

HextaUI, MIT lisansı altında açık kaynaklıdır; kişisel ve ticari projeler için ücretsizdir.