

<InteractiveDemo
  name="command"
  controls="[
  {
    type: 'string',
    name: 'placeholder',
    defaultValue: 'Type a command...',
  },
]"
/>

## Installation [#installation]

<CodeBlockTabs defaultValue="npm">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="npm">
      npm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="pnpm">
      pnpm
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="yarn">
      yarn
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="bun">
      bun
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="npm">
    ```bash
    npx shadcn@latest add @dotui/command
    ```
  </CodeBlockTab>

  <CodeBlockTab value="pnpm">
    ```bash
    pnpm dlx shadcn@latest add @dotui/command
    ```
  </CodeBlockTab>

  <CodeBlockTab value="yarn">
    ```bash
    yarn dlx shadcn@latest add @dotui/command
    ```
  </CodeBlockTab>

  <CodeBlockTab value="bun">
    ```bash
    bun x shadcn@latest add @dotui/command
    ```
  </CodeBlockTab>
</CodeBlockTabs>

## Usage [#usage]

Use command menus to provide users with a searchable list of commands or actions.

```tsx
import {
  Command,
  CommandContent,
  CommandInput,
  CommandItem,
} from '@/components/ui/command'
```

```tsx
<Command>
  <CommandInput placeholder="Type a command..." />
  <CommandContent>
    <CommandItem textValue="Create file">Create new file</CommandItem>
    <CommandItem textValue="Open file">Open file</CommandItem>
  </CommandContent>
</Command>
```

## Examples [#examples]

<Examples>
  <Example name="command/demos/basic" />

  <Example name="command/demos/dialog" />
</Examples>

## API Reference [#api-reference]

### Command [#command]

<Reference name="command" />

### CommandInput [#commandinput]

<Reference name="command-input" />

### CommandContent [#commandcontent]

<Reference name="command-content" />
