Radio Group: HextaUI ve shadcn/ui

HextaUI Radio group, shadcn/ui adlarını ve tema token’larını korur ve aynı CLI ile kurulur. Bu sayfa, ikisinin kaynağından okunan farkları listeler. shadcn/ui tarafı, 2026-10-16 itibarıyla base-vega kayıt defteridir.

Bir bakışta

Ölçüt	HextaUI	shadcn/ui
Dışa aktarılan parçalar	5	2
Sarmalayıcının işlediği props	8	0
Kaynak kod satırı	181	37
npm bağımlılıkları	`@base-ui/react@^1.8.0cn`	`cn`
Şunlardan oluşur	`motiontheme`	–

Daha fazla kod tek başına daha iyi değildir. HextaUI’deki ek satırların çoğu, aksi halde kendiniz yazacağınız durumları, hareketi ve uç durumları ele alır.

Parçalar

Yalnızca HextaUI’deRadioGroupCardRadioGroupCardTitleRadioGroupCardDescription

İkisinde deRadioGroupRadioGroupItem

HextaUI’nin eklediği props

HextaUI sarmalayıcısının kendisinin işlediği, shadcn/ui sarmalayıcısının işlemediği props. Doğrudan Base UI’ye veya alttaki kütüphaneye geçirilen props, iki sürüm de kabul ettiği için listede yok.

Prop	Ne yapar
`variant`RadioGroup	card, kayan seçim halkasını ekler.
`radioClassName`RadioGroupCard	Kartın içindeki radyo için sınıflar.

HextaUI sürümü

All new messagesDirect messages and mentionsNothing

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

const options = [
  { value: "all", label: "All new messages" },
  { value: "mentions", label: "Direct messages and mentions" },
  { value: "none", label: "Nothing" },
]

export function RadioGroupDemo() {
  return (
    <RadioGroup
      aria-label="Notify me about"
      defaultValue="mentions"
      className="w-fit"
    >
      {options.map((option) => (
        <label key={option.value} className="flex items-center gap-3 text-sm">
          <RadioGroupItem value={option.value} />
          {option.label}
        </label>
      ))}
    </RadioGroup>
  )
}

Tüm durumlar, klavye haritası ve API başvurusu bileşen sayfasında.

Örneklerinden 6 tanesinin ayrıca kendi sayfası var.

Tek bir bileşeni değiştirin

@/components/ui içindeki shadcn/ui dosyasını değiştirmek için add komutunu --overwrite ile çalıştırın, ardından tutmadan önce git’teki farkı inceleyin. İçe aktarmalar aynı kalır ve değiştirmediğiniz bileşenler çalışmaya devam eder.

pnpm dlx shadcn@latest add https://hextaui.com/r/radio-group.json --overwrite

Yukarıdaki tablodaki her prop bir eklemedir, bu yüzden shadcn/ui için yazılmış kod onu henüz geçirmez.
Geçmeden önce yalnızca shadcn/ui için listelenen parça ve varyantları kontrol edin ve en yakın HextaUI karşılığıyla eşleştirin.