Switch: HextaUI ve shadcn/ui

HextaUI Switch, 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	1	1
Sarmalayıcının işlediği props	14	1
Kaynak kod satırı	350	31
npm bağımlılıkları	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`cn`
Şunlardan oluşur	`motionspinnertheme`	–

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.

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
`icons`Switch	İzde açık ve kapalı işaretlerini gösterir.

Varyantlar

Prop	İkisinde de	Yalnızca HextaUI	Yalnızca shadcn/ui
`variant`Switch	–	`defaultios`	–

HextaUI sürümü

Wi-FiJoin known networks automatically.BluetoothConnect to headphones and keyboards.Nearby sharingLet people around you send files.

import { Switch } from "@/components/ui/switch"

const settings = [
  {
    id: "wifi",
    title: "Wi-Fi",
    description: "Join known networks automatically.",
    on: true,
  },
  {
    id: "bluetooth",
    title: "Bluetooth",
    description: "Connect to headphones and keyboards.",
    on: false,
  },
  {
    id: "airdrop",
    title: "Nearby sharing",
    description: "Let people around you send files.",
    on: true,
  },
]

export function SwitchDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y rounded-xl border">
      {settings.map((setting) => (
        <label
          key={setting.id}
          className="flex items-center justify-between gap-4 p-4 text-sm"
        >
          <span className="flex flex-col gap-0.5">
            <span className="font-medium">{setting.title}</span>
            <span className="text-muted-foreground">{setting.description}</span>
          </span>
          <Switch defaultChecked={setting.on} />
        </label>
      ))}
    </div>
  )
}

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

Örneklerinden 8 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/switch.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.