Command

Installation

›pnpm dlx shadcn@latest add @evolphin/command

Usage

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

<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>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem>Profile</CommandItem>
      <CommandItem>Billing</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Type Definitions

interface CommandProps {
  /** The value of the filtered query */
  value?: string;  
CommandProps.value?: string | undefined
The value of the filtered query
  /** Event handler called when the value changes */
  ?: (: string) => void;
  /** Whether the command menu matches keys filter */
  ?: (: string, : string) => number;
}

Examples

Default

Dialog

To use the command menu as a dialog, import CommandDialog.

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

API Reference

Prop	Type	Default	Description
`value`	`string`	-	The value of the filtered query.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.
`loop`	`boolean`	`false`	Whether to loop through items when navigating.
`className`	`string`	-	Additional CSS classes

CommandInput

Prop	Type	Default	Description
`placeholder`	`string`	-	The placeholder text for the input.
`value`	`string`	-	The value of the input.
`onValueChange`	`(value: string) => void`	-	Event handler called when the value changes.

CommandList

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CommandEmpty

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

CommandGroup

Prop	Type	Default	Description
`heading`	`React.ReactNode`	-	The heading of the group.
`className`	`string`	-	Additional CSS classes

CommandItem

Prop	Type	Default	Description
`value`	`string`	-	The value of the item.
`onSelect`	`(value: string) => void`	-	Event handler called when the item is selected.
`disabled`	`boolean`	`false`	Whether the item is disabled.

CommandShortcut

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

Command

On this page