Combobox: HextaUI y shadcn/ui

El Combobox de HextaUI mantiene los nombres y tokens de tema de shadcn/ui y se instala con la misma CLI. Esta página lista lo que cambia, leído del código de ambos. El lado de shadcn/ui es su registro base-vega a fecha de 2026-10-16.

De un vistazo

Medida	HextaUI	shadcn/ui
Partes exportadas	17	14
Props que gestiona el envoltorio	11	9
Líneas de código	580	328
Dependencias de npm	`@base-ui/react@^1.8.0@tabler/icons-reactclass-variance-authoritycn`	`@base-ui/reactcn`
Construido con	`theme`	`buttoninput-group`

Más código no es mejor por sí solo. La mayoría de las líneas extra de HextaUI cubren estados, animaciones y casos límite que de otro modo escribirías tú.

Partes

Solo en HextaUIComboboxComboboxClearComboboxStatus

En ambosComboboxValueComboboxTriggerComboboxInputComboboxContentComboboxListComboboxItemComboboxGroupComboboxLabelComboboxCollectionComboboxEmptyComboboxSeparatorComboboxChipsComboboxChipComboboxChipsInput

La versión de HextaUI

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>
  )
}

Todos los estados, el mapa de teclado y la referencia de la API están en la página del componente.

12 de sus ejemplos también tienen su propia página.

Cambia un componente

Ejecuta el comando add con --overwrite para reemplazar el archivo de shadcn/ui en @/components/ui y revisa el diff en git antes de quedártelo. Los imports no cambian y los componentes que no reemplaces siguen funcionando.

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

Cada prop de la tabla anterior es nueva, así que el código escrito para shadcn/ui todavía no la pasa.
Antes de cambiar, revisa cualquier parte o variante que solo aparezca en shadcn/ui y asígnala a la más parecida de HextaUI.

Combobox: HextaUI y shadcn/ui

De un vistazo

Partes

La versión de HextaUI

Cambia un componente

Otros componentes comparados

Más comparaciones