# 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.

Example: https://hextaui.com/docs/command/examples/dialog
Component docs: https://hextaui.com/docs/command.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/command-dialog.json
```

This adds `components/examples/command/dialog.tsx` with the Command component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/command/dialog.tsx"
"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>
  )
}
```

## Props in this example

### Command

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

### CommandDialog

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

### CommandInput

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `string` | – |  |

### CommandGroup

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `heading` | `ReactNode` | – |  |

### CommandItem

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

### CommandPage

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

### CommandShortcut

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

## More Command examples

- [Basic](https://hextaui.com/docs/command/examples/basic.md)
- [Pages](https://hextaui.com/docs/command/examples/pages.md)
- [Scrollable](https://hextaui.com/docs/command/examples/scrollable.md)
- [Async results](https://hextaui.com/docs/command/examples/async.md)
- [Long content](https://hextaui.com/docs/command/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/command/examples/rtl.md)