Combobox: HextaUI ve shadcn/ui

HextaUI Combobox, 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	17	14
Sarmalayıcının işlediği props	11	9
Kaynak kod satırı	580	328
npm bağımlılıkları	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`@base-ui/reactcn`
Şunlardan oluşur	`theme`	`buttoninput-group`

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’deComboboxComboboxClearComboboxStatus

İkisinde deComboboxValueComboboxTriggerComboboxInputComboboxContentComboboxListComboboxItemComboboxGroupComboboxLabelComboboxCollectionComboboxEmptyComboboxSeparatorComboboxChipsComboboxChipComboboxChipsInput

HextaUI sürümü

Fruit

"use client"

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
import { Label } from "@/components/ui/label"

const fruits = [
  "Apple",
  "Apricot",
  "Banana",
  "Blackberry",
  "Blueberry",
  "Cherry",
  "Grape",
  "Grapefruit",
  "Kiwi",
  "Lychee",
  "Mango",
  "Orange",
  "Papaya",
  "Peach",
  "Pear",
  "Pineapple",
  "Plum",
  "Raspberry",
  "Strawberry",
  "Watermelon",
]

export function ComboboxDemo() {
  return (
    <div className="flex w-full max-w-xs flex-col gap-2">
      <Label htmlFor="combobox-demo">Fruit</Label>
      <Combobox items={fruits}>
        <ComboboxInput id="combobox-demo" placeholder="Select a fruit" />
        <ComboboxContent>
          <ComboboxEmpty>No fruit found.</ComboboxEmpty>
          <ComboboxList>
            {(item: string) => (
              <ComboboxItem key={item} value={item}>
                {item}
              </ComboboxItem>
            )}
          </ComboboxList>
        </ComboboxContent>
      </Combobox>
    </div>
  )
}

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

Örneklerinden 12 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/combobox.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.

Combobox: HextaUI ve shadcn/ui

Bir bakışta

Parçalar

HextaUI sürümü

Tek bir bileşeni değiştirin

Karşılaştırılan diğer bileşenler

Diğer karşılaştırmalar