Command: Dialog

Put a <Command /> inside <CommandDialog /> and toggle it with useCommandHotkey. Press ⌘K or Ctrl K. Item shortcuts run while it is open, matches are highlighted, and preserveSearch keeps the query and selection for the next time it opens.

Nothing run yet. Theme: System.

"use client"

import * as React from "react"
import {
  IconCalculator,
  IconCalendar,
  IconCheck,
  IconCreditCard,
  IconExternalLink,
  IconMoodSmile,
  IconPalette,
  IconPoint,
  IconSettings,
  IconUser,
} from "@tabler/icons-react"

import { Button } from "@/components/ui/button"
import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandFooter,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandPage,
  CommandSeparator,
  CommandShortcut,
  useCommandHotkey,
} from "@/components/ui/command"

export function CommandDialogDemo() {
  const [open, setOpen] = React.useState(false)
  const [last, setLast] = React.useState<string>()
  const [theme, setTheme] = React.useState("System")

  useCommandHotkey("mod+k", () => setOpen((value) => !value))

  const run = (action: string) => {
    setLast(action)
    setOpen(false)
  }

  return (
    <div className="flex flex-col items-center gap-3">
      <Button variant="outline" onClick={() => setOpen(true)}>
        Open palette
        <CommandShortcut hotkey="mod+k" />
      </Button>
      <p className="text-sm text-muted-foreground">
        {last ? `Ran “${last}”.` : "Nothing run yet."} Theme: {theme}.
      </p>
      <CommandDialog open={open} onOpenChange={setOpen} preserveSearch>
        <Command highlight>
          <CommandInput placeholder="Type a command or search…" />
          <CommandList>
            <CommandEmpty>
              {(search) => `No results for “${search}”.`}
            </CommandEmpty>
            <CommandGroup heading="Suggestions">
              <CommandItem
                shortcut="mod+shift+c"
                onSelect={() => run("Calendar")}
              >
                <IconCalendar />
                Calendar
              </CommandItem>
              <CommandItem onSelect={() => run("Search Emoji")}>
                <IconMoodSmile />
                Search Emoji
              </CommandItem>
              <CommandItem disabled>
                <IconCalculator />
                Calculator
              </CommandItem>
              <CommandItem page="theme" pageTitle="Theme">
                <IconPalette />
                Change theme…
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Settings">
              <CommandItem shortcut="mod+p" onSelect={() => run("Profile")}>
                <IconUser />
                Profile
              </CommandItem>
              <CommandItem shortcut="mod+b" onSelect={() => run("Billing")}>
                <IconCreditCard />
                Billing
              </CommandItem>
              <CommandItem
                shortcut="mod+,"
                keywords={["preferences", "options"]}
                onSelect={() => run("Settings")}
              >
                <IconSettings />
                Settings
              </CommandItem>
            </CommandGroup>
            <CommandSeparator />
            <CommandGroup heading="Links">
              <CommandItem href="/docs" onSelect={() => setOpen(false)}>
                <IconExternalLink />
                All components
              </CommandItem>
            </CommandGroup>
            <CommandPage id="theme">
              <CommandGroup heading="Theme">
                {["Light", "Dark", "System"].map((option) => (
                  <CommandItem
                    key={option}
                    onSelect={() => {
                      setTheme(option)
                      run(`Theme: ${option}`)
                    }}
                  >
                    {option === theme ? <IconCheck /> : <IconPoint />}
                    {option}
                  </CommandItem>
                ))}
              </CommandGroup>
            </CommandPage>
          </CommandList>
          <CommandFooter />
        </Command>
      </CommandDialog>
    </div>
  )
}

Add this example

This adds the example as components/examples/command/dialog.tsx, together with the Command component and the HextaUI theme tokens it needs.

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

To add only the component, follow the Command installation.

Props in this example

The Command props this example sets, from the API reference.

Command

Prop	Type	Default
`highlight`Highlights the matched letters in each item and dims the rest.	`boolean`	`false`

CommandDialog

Prop	Type	Default
`open`	`boolean`	`–`
`onOpenChange`	`(open: boolean, details) => void`	`–`
`preserveSearch`Keep the dialog mounted so the query, page and selection survive closing. The query is selected when it reopens.	`boolean`	`false`

CommandInput

Prop	Type	Default
`placeholder`	`string`	`–`

CommandGroup

Prop	Type	Default
`heading`	`ReactNode`	`–`

CommandItem

Prop	Type	Default
`onSelect`Runs on click, Enter or the item’s shortcut, after the confirm blink.	`(value: string) => void`	`–`
`keywords`Extra words that match this item.	`string[]`	`–`
`disabled`	`boolean`	`false`
`shortcut`A hotkey like "mod+shift+c". Shown on the item and runs it while focus is in the menu.	`string`	`–`
`page`Opens the CommandPage with this id instead of running.	`string`	`–`
`pageTitle`Title shown in the page chip. Defaults to the value.	`string`	`–`
`href`Renders the item as a link. Enter follows it, ⌘ or Ctrl Enter opens a new tab.	`string`	`–`

CommandPage

Prop	Type	Default
`id`Matches the page prop of the item that opens it. Its groups and items only render while it is the current page.	`string`	`–`

CommandShortcut

Prop	Type	Default
`hotkey`Formats a hotkey like "mod+k" for the current platform. Children override it.	`string`	`–`

Every prop is in the Command API reference.

More Command examples

See them all, with keyboard support and accessibility notes, on the Command page.