Command: HextaUI und shadcn/ui

Command von HextaUI behält die Namen und Theme-Tokens von shadcn/ui und wird mit derselben CLI installiert. Diese Seite listet die Unterschiede auf, aus dem Code beider gelesen. Die shadcn/ui-Seite ist das base-vega-Registry mit Stand 2026-10-16.

Auf einen Blick

Kennzahl	HextaUI	shadcn/ui
Exportierte Teile	12	9
Props, die der Wrapper verarbeitet	33	3
Codezeilen	1179	210
npm-Abhängigkeiten	`@base-ui/react@^1.8.0@tabler/icons-reactcmdk@^1.1.1cn`	`cmdkcn`
Aufgebaut aus	`buttonhotkeymotionspinnertheme`	`dialoginput-group`

Mehr Code ist für sich genommen nicht besser. Die meisten zusätzlichen Zeilen in HextaUI behandeln Zustände, Bewegung und Randfälle, die du sonst selbst schreiben würdest.

Teile

Nur in HextaUICommandPageCommandLoadingCommandFooter

In beidenCommandCommandInputCommandListCommandEmptyCommandGroupCommandSeparatorCommandItemCommandShortcutCommandDialog

Props, die HextaUI ergänzt

Props, die der HextaUI-Wrapper selbst verarbeitet und der shadcn/ui-Wrapper nicht. Props, die direkt an Base UI oder die zugrunde liegende Bibliothek gehen, fehlen hier, weil beide Versionen sie annehmen.

Prop	Was sie bewirkt
`formatResults`Command	Text, der Screenreadern nach dem Tippen angesagt wird.
`highlight`Command	Hebt die passenden Buchstaben in jedem Eintrag hervor und dimmt den Rest.
`rootTitle`Command	Wird angesagt, wenn du die letzte Seite verlässt und zur Wurzel zurückkehrst.
`clearLabel`CommandInput	Zugänglicher Name des Löschen-Buttons.
`backLabel`CommandInput	Zugänglicher Name des Seiten-Chips.
`minDuration`CommandLoading	Mindestdauer in Millisekunden, die der Spinner nach dem Erscheinen bleibt.
`shortcut`CommandItem	Ein Hotkey wie "mod+shift+c". Wird am Eintrag angezeigt und führt ihn aus, solange der Fokus im Menü liegt.
`page`CommandItem	Öffnet die CommandPage mit dieser ID, statt auszuführen.
`pageTitle`CommandItem	Titel, der im Seiten-Chip angezeigt wird. Standardmäßig der Wert.
`confirm`CommandItem	Lässt den Eintrag kurz blinken, bevor er ausgeführt wird, damit die Auswahl wahrgenommen wird.
`hotkey`CommandShortcut	Formatiert einen Hotkey wie "mod+k" für die aktuelle Plattform. Kinder überschreiben es.
`preserveSearch`CommandDialog	Hält den Dialog gemountet, sodass Suchbegriff, Seite und Auswahl das Schließen überstehen. Der Suchbegriff ist beim erneuten Öffnen markiert.

Die HextaUI-Version

Command menu

import {
  IconCalculator,
  IconCalendar,
  IconCreditCard,
  IconMoodSmile,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
} from "@/components/ui/command"

export function CommandDemo() {
  return (
    <Command highlight className="w-full max-w-sm">
      <CommandInput placeholder="Type a command or search…" />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>
            <IconCalendar />
            Calendar
          </CommandItem>
          <CommandItem>
            <IconMoodSmile />
            Search Emoji
          </CommandItem>
          <CommandItem disabled>
            <IconCalculator />
            Calculator
          </CommandItem>
        </CommandGroup>
        <CommandSeparator />
        <CommandGroup heading="Settings">
          <CommandItem shortcut="mod+p">
            <IconUser />
            Profile
          </CommandItem>
          <CommandItem shortcut="mod+b">
            <IconCreditCard />
            Billing
          </CommandItem>
          <CommandItem shortcut="mod+,">
            <IconSettings />
            Settings
          </CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  )
}

Alle Zustände, die Tastaturbelegung und die API-Referenz stehen auf der Komponentenseite.

7 seiner Beispiele haben auch eine eigene Seite.

Eine Komponente wechseln

Führe den add-Befehl mit --overwrite aus, um die shadcn/ui-Datei in @/components/ui zu ersetzen, und prüfe den Diff in git, bevor du ihn behältst. Die Imports bleiben gleich, und Komponenten, die du nicht ersetzt, funktionieren weiter.

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

Jede Prop in der Tabelle oben ist neu, daher übergeben Aufrufe, die für shadcn/ui geschrieben wurden, sie noch nicht.
Prüfe vor dem Wechsel jeden Teil und jede Variante, die nur bei shadcn/ui steht, und ordne sie dem nächsten HextaUI-Gegenstück zu.