Command

A strict, minimalist command menu component.

A fast, composable, unstyled command menu for React. Stripped of border-radius to align with the Monolith architectural grid.

Installation


$ pnpm dlx shadcn@latest add "https://ui.manpuc.me/r/command.json"

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@/components/ui/command"
 
export function CommandDemo() {
  return (
    <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>
  )
}

Examples

Default

Select

Dialog

Command can be rendered inside a dialog for global search menus. Try pressing ⌘J in the preview below.

Press J

API Reference

The Command component is built on top of cmdk.

Prop	Type	Default	Description
`value`	`string`	-	The controlled value of the command menu.
`onValueChange`	`function`	-	Event handler called when the value changes.
`shouldFilter`	`boolean`	`true`	Whether to filter the items based on the input value.
`filter`	`function`	-	Custom filter function.
`loop`	`boolean`	`false`	Whether to loop keyboard navigation.

CommandDialog

Prop	Type	Default	Description
`title`	`string`	`"Command Menu"`	Accessible title for the dialog. Required for screen readers.

Checkbox Copy Button

On This Page

Installation Usage Examples Default Dialog API Reference CommandDialog