Command : HextaUI et shadcn/ui

Le Command de HextaUI garde les noms et les tokens de thème de shadcn/ui et s’installe avec la même CLI. Cette page liste ce qui diffère, lu dans le code des deux. Le côté shadcn/ui correspond à son registre base-vega au 2026-10-16.

En un coup d’œil

Mesure	HextaUI	shadcn/ui
Parties exportées	12	9
Props gérées par l’enveloppe	33	3
Lignes de code	1179	210
Dépendances npm	`@base-ui/react@^1.8.0@tabler/icons-reactcmdk@^1.1.1cn`	`cmdkcn`
Construit avec	`buttonhotkeymotionspinnertheme`	`dialoginput-group`

Plus de code n’est pas mieux en soi. La plupart des lignes en plus dans HextaUI gèrent des états, des animations et des cas limites que vous écririez sinon vous-même.

Parties

Seulement dans HextaUICommandPageCommandLoadingCommandFooter

Dans les deuxCommandCommandInputCommandListCommandEmptyCommandGroupCommandSeparatorCommandItemCommandShortcutCommandDialog

Props ajoutées par HextaUI

Les props gérées par l’enveloppe HextaUI elle-même et pas par celle de shadcn/ui. Les props transmises telles quelles à Base UI ou à la bibliothèque sous-jacente sont exclues, car les deux versions les acceptent.

Prop	Rôle
`formatResults`Command	Texte annoncé aux lecteurs d’écran après la saisie.
`highlight`Command	Met en évidence les lettres correspondantes dans chaque élément et atténue le reste.
`rootTitle`Command	Annoncé lorsque vous quittez la dernière page et revenez à la racine.
`clearLabel`CommandInput	Nom accessible du bouton d’effacement.
`backLabel`CommandInput	Nom accessible de la chip de page.
`minDuration`CommandLoading	Nombre minimal de millisecondes pendant lesquelles le spinner reste une fois affiché.
`shortcut`CommandItem	Un raccourci comme "mod+shift+c". Affiché sur l’élément et l’exécute lorsque le focus est dans le menu.
`page`CommandItem	Ouvre le CommandPage avec cet id au lieu de s’exécuter.
`pageTitle`CommandItem	Titre affiché dans la chip de page. Par défaut, la valeur.
`confirm`CommandItem	Fait clignoter brièvement l’élément avant de l’exécuter, pour que le choix soit perceptible.
`hotkey`CommandShortcut	Formate un raccourci comme "mod+k" pour la plateforme actuelle. Les enfants le remplacent.
`preserveSearch`CommandDialog	Garde la boîte de dialogue montée pour que la requête, la page et la sélection survivent à la fermeture. La requête est sélectionnée à la réouverture.

La version HextaUI

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

Tous les états, les raccourcis clavier et la référence de l’API sont sur la page du composant.

7 de ses exemples ont aussi leur propre page.

Changer un composant

Lancez la commande add avec --overwrite pour remplacer le fichier shadcn/ui dans @/components/ui, puis relisez le diff dans git avant de le garder. Les imports restent les mêmes et les composants que vous ne remplacez pas continuent de fonctionner.

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

Chaque prop du tableau ci-dessus est un ajout, donc le code écrit pour shadcn/ui ne la passe pas encore.
Avant de changer, vérifiez chaque partie ou variante listée seulement pour shadcn/ui et associez-la à l’équivalent HextaUI le plus proche.