# Command

A strict, minimalist command menu component.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



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



<ComponentPreview name="command-demo">
  <div className="flex justify-center py-8 mx-auto w-full max-w-sm">
    <Command className="rounded-none border shadow-md">
      <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>
  </div>
</ComponentPreview>

## Installation [#installation]

```bash
npx shadcn@latest add "https://ui.manpuc.me/r/command.json"
```

## Usage [#usage]

```tsx
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 [#examples]

### Default [#default]

<ComponentPreview name="command-demo">
  <Command className="rounded-none border shadow-md max-w-[450px] mx-auto my-8">
    <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>

    <CommandFooter>
      <div className="flex items-center gap-1">
        <Kbd>
          <CornerDownLeft />
        </Kbd>

        <span className="text-muted-foreground mr-2">
          Select
        </span>
      </div>
    </CommandFooter>
  </Command>
</ComponentPreview>

### Dialog [#dialog]

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

<ComponentPreview name="command-dialog">
  <CommandDialogDemo />
</ComponentPreview>

## API Reference [#api-reference]

The `Command` component is built on top of [cmdk](https://cmdk.paco.me/).

| 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 [#commanddialog]

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