export function CommandDialogDemo() {
const [open, setOpen] = React.useState(false);
React.useEffect(() => {
  const down = (event: KeyboardEvent) => {
    if (event.key === "j" && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      setOpen((value) => !value);
    }
  };
  document.addEventListener("keydown", down);
  return () => document.removeEventListener("keydown", down);
}, []);
return (
  <CommandDialog open={open} onOpenChange={setOpen}>
    <CommandInput placeholder="Type a command or search..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Suggestions">
        <CommandItem>Calendar</CommandItem>
        <CommandItem>Search Emoji</CommandItem>
        <CommandItem>Calculator</CommandItem>
      </CommandGroup>
    </CommandList>
  </CommandDialog>
);
}

Command

tsx

import {Command,CommandEmpty,CommandGroup,CommandInput,CommandItem,CommandList,CommandSeparator,CommandShortcut,} from "@/components/ui/command";import {Calculator,Calendar,CreditCard,Settings,Smile,User,} from "lucide-react";export function CommandDemo() {return (  <Command className="rounded-lg border shadow-md md:min-w-[450px]">    <CommandInput placeholder="Type a command or search..." />    <CommandList>      <CommandEmpty>No results found.</CommandEmpty>      <CommandGroup heading="Suggestions">        <CommandItem>          <Calendar />          <span>Calendar</span>        </CommandItem>        <CommandItem>          <Smile />          <span>Search Emoji</span>        </CommandItem>        <CommandItem disabled>          <Calculator />          <span>Calculator</span>        </CommandItem>      </CommandGroup>      <CommandSeparator />      <CommandGroup heading="Settings">        <CommandItem>          <User />          <span>Profile</span>          <CommandShortcut>⌘P</CommandShortcut>        </CommandItem>        <CommandItem>          <CreditCard />          <span>Billing</span>          <CommandShortcut>⌘B</CommandShortcut>        </CommandItem>        <CommandItem>          <Settings />          <span>Settings</span>          <CommandShortcut>⌘S</CommandShortcut>        </CommandItem>      </CommandGroup>    </CommandList>  </Command>);}

Documentation

Learn Playground

Installation

pnpm dlx shadcn@latest add "https://godui.design/r/command.json"

Usage

tsx

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";

tsx

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search Emoji</CommandItem>
      <CommandItem>Calculator</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

API

Command

The menu root. Built on cmdk Command; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Value of the selected item. Use when controlled.
`defaultValue`	`string`	none	Selected item value on first render.
`onValueChange`	`(value: string) => void`	none	Called when the selected item changes.
`shouldFilter`	`boolean`	`true`	Set `false` to filter and sort items yourself.
`filter`	`(value: string, search: string, keywords?: string[]) => number`	`command-score`	Rank each item from 0 (hidden) to 1 (best match).
`loop`	`boolean`	`false`	Wrap around at the ends with the arrow keys.
`disablePointerSelection`	`boolean`	`false`	Don't select items on pointer move.
`vimBindings`	`boolean`	`true`	Enable the ctrl+n/j/p/k shortcuts.
`label`	`string`	none	Accessible label for the menu. Not shown.

CommandDialog

Command inside a GodUI Dialog. Accepts all Dialog props (open, defaultOpen, onOpenChange, modal).

Prop	Type	Default	Description
`title`	`string`	`"Command Palette"`	Screen-reader title.
`description`	`string`	`"Search for a command to run..."`	Screen-reader description.
`showCloseButton`	`boolean`	`true`	Show the close button in the corner.

CommandInput

The search input with a search icon. Built on cmdk Input; accepts all <input> props.

Prop	Type	Default	Description
`value`	`string`	none	Search text. Use when controlled.
`onValueChange`	`(search: string) => void`	none	Called when the search text changes.

CommandList

The scrolling list. It also renders the sliding highlight, an aria-hidden <span data-slot="command-indicator">. Built on cmdk List; accepts all its props.

CommandEmpty

Shown when no item matches the search. Built on cmdk Empty; accepts all its props.

CommandGroup

Groups items under a heading. Built on cmdk Group; accepts all its props.

Prop	Type	Default	Description
`heading`	`ReactNode`	none	Heading shown above the group.
`value`	`string`	none	Unique value. Required when there's no `heading`.
`forceMount`	`boolean`	`false`	Render the group regardless of filtering.

CommandItem

A selectable item. Built on cmdk Item; accepts all its props.

Prop	Type	Default	Description
`value`	`string`	none	Unique value. Inferred from the text content when omitted.
`keywords`	`string[]`	none	Extra terms to match while filtering.
`onSelect`	`(value: string) => void`	none	Called on click or Enter.
`disabled`	`boolean`	`false`	Make the item unselectable.
`forceMount`	`boolean`	`false`	Render the item regardless of filtering.

CommandSeparator

A line between groups, hidden while searching. Built on cmdk Separator; accepts all its props.

Prop	Type	Default	Description
`alwaysRender`	`boolean`	`false`	Keep the separator visible while searching.

CommandShortcut

Renders a native <span> for a keyboard hint and accepts all of its props.

Props match shadcn/ui Command.