Command: HextaUI and shadcn/ui

The HextaUI Command keeps the shadcn/ui names and theme tokens and installs with the same CLI. This page lists what differs, read from the source of both. The shadcn/ui side is its base-vega registry as of 2026-10-16.

At a glance

MeasureHextaUIshadcn/ui
Exported parts129
Props the wrapper handles333
Lines of source1179210
npm dependencies@base-ui/react@^1.8.0@tabler/icons-reactcmdk@^1.1.1cncmdkcn
Built frombuttonhotkeymotionspinnerthemedialoginput-group

More source is not better on its own. Most of the extra lines in HextaUI handle states, motion and edge cases that you would otherwise write yourself.

Parts

Only in HextaUICommandPageCommandLoadingCommandFooter

In bothCommandCommandInputCommandListCommandEmptyCommandGroupCommandSeparatorCommandItemCommandShortcutCommandDialog

Props HextaUI adds

Props the HextaUI wrapper handles itself that the shadcn/ui wrapper does not. Props passed straight through to Base UI or the underlying library are left out, because both versions accept them.

PropWhat it does
formatResultsCommandText announced to screen readers after typing.
highlightCommandHighlights the matched letters in each item and dims the rest.
rootTitleCommandAnnounced when you leave the last page and return to the root.
clearLabelCommandInputAccessible name of the clear button.
backLabelCommandInputAccessible name of the page chip.
minDurationCommandLoadingMinimum milliseconds the spinner stays once shown.
shortcutCommandItemA hotkey like "mod+shift+c". Shown on the item and runs it while focus is in the menu.
pageCommandItemOpens the CommandPage with this id instead of running.
pageTitleCommandItemTitle shown in the page chip. Defaults to the value.
confirmCommandItemBlink the item briefly before running it, so the choice registers.
hotkeyCommandShortcutFormats a hotkey like "mod+k" for the current platform. Children override it.
preserveSearchCommandDialogKeep the dialog mounted so the query, page and selection survive closing. The query is selected when it reopens.

The HextaUI version

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

Every state, the keyboard map and the API reference are on the component page.

7 of its examples also have a page of their own.

Switch one component

Run the add command with --overwrite to replace the shadcn/ui file in @/components/ui, then review the diff in git before you keep it. Imports stay the same, and components you don’t replace keep working.

pnpm dlx shadcn@latest add https://hextaui.com/r/command.json --overwrite
  • Every prop in the table above is an addition, so call sites written for shadcn/ui don’t pass it yet.
  • Check any part or variant listed only for shadcn/ui before you switch, and map it to the closest HextaUI one.

Other components compared

More comparisons