Command: HextaUI e shadcn/ui

O Command do HextaUI mantém os nomes e tokens de tema do shadcn/ui e instala com a mesma CLI. Esta página lista o que muda, lido do código de ambos. O lado do shadcn/ui é o registro base-vega em 2026-10-16.

Visão geral

Medida	HextaUI	shadcn/ui
Partes exportadas	12	9
Props tratadas pelo wrapper	33	3
Linhas de código	1179	210
Dependências do npm	`@base-ui/react@^1.8.0@tabler/icons-reactcmdk@^1.1.1cn`	`cmdkcn`
Construído com	`buttonhotkeymotionspinnertheme`	`dialoginput-group`

Mais código não é melhor por si só. A maior parte das linhas extras do HextaUI cuida de estados, animações e casos extremos que você escreveria por conta própria.

Partes

Só no HextaUICommandPageCommandLoadingCommandFooter

Em ambosCommandCommandInputCommandListCommandEmptyCommandGroupCommandSeparatorCommandItemCommandShortcutCommandDialog

Props que o HextaUI adiciona

Props que o próprio wrapper do HextaUI trata e o do shadcn/ui não. Props repassadas direto ao Base UI ou à biblioteca por baixo ficam de fora, porque as duas versões as aceitam.

Prop	O que faz
`formatResults`Command	Texto anunciado aos leitores de tela após a digitação.
`highlight`Command	Destaca as letras correspondentes em cada item e atenua o resto.
`rootTitle`Command	Anunciado quando você sai da última página e volta à raiz.
`clearLabel`CommandInput	Nome acessível do botão de limpar.
`backLabel`CommandInput	Nome acessível do chip da página.
`minDuration`CommandLoading	Mínimo de milissegundos que o spinner permanece depois de exibido.
`shortcut`CommandItem	Um atalho de teclado como "mod+shift+c". Exibido no item e o executa enquanto o foco está no menu.
`page`CommandItem	Abre o CommandPage com este id em vez de executar.
`pageTitle`CommandItem	Título exibido no chip da página. O padrão é o value.
`confirm`CommandItem	Pisca o item brevemente antes de executá-lo, para que a escolha seja percebida.
`hotkey`CommandShortcut	Formata um atalho como "mod+k" para a plataforma atual. Os children o substituem.
`preserveSearch`CommandDialog	Mantém o diálogo montado para que a consulta, a página e a seleção sobrevivam ao fechamento. A consulta fica selecionada quando ele reabre.

A versão do 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>
  )
}

Todos os estados, o mapa de teclado e a referência da API estão na página do componente.

7 dos seus exemplos também têm uma página própria.

Troque um componente

Rode o comando add com --overwrite para substituir o arquivo do shadcn/ui em @/components/ui e revise o diff no git antes de mantê-lo. Os imports continuam iguais e os componentes que você não trocar seguem funcionando.

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

Cada prop da tabela acima é nova, então o código escrito para o shadcn/ui ainda não a passa.
Antes de trocar, confira qualquer parte ou variante listada só para o shadcn/ui e associe-a à mais próxima do HextaUI.