# Command

A keyboard first menu for every action in the product, with fuzzy search, submenus and inline confirmation.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/command
```

## Usage

```tsx
import { CommandDialog } from '@/components/fetaui/command'

export function Example() {
  return (
    <CommandDialog
      groups={[{ label: 'Project', items: [{ id: 'edit', title: 'Edit project', onRun: edit }] }]}
      onAsk={(query) => askAssistant(query)}
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| groups | CommandGroup[] | required |
| placeholder | string | Search commands |
| defaultQuery | string |  |
| onAsk | (query) => void |  |
| onClose | () => void |  |
| shortcut | string | ⌘ K |
| animated | boolean | true |
| open (CommandDialog) | boolean |  |
| defaultOpen (CommandDialog) | boolean | false |
| onOpenChange (CommandDialog) | (open) => void |  |
| hotkey (CommandDialog) | boolean | true |

## When to use

- To give power users one place for every action.
- Group by object, with the most common first.
- Keep descriptions to one short phrase.

## When not to use

- For a few actions on one object: use Dropdown Menu.
- For choosing a value in a form: use Combobox.

## Accessibility

- A native modal dialog, so the page is inert, with a combobox input and a listbox of options.
- Groups use role group with aria-labelledby.
- Shortcuts are exposed with aria-keyshortcuts.
- Focus stays inside the dialog and returns to where ⌘K was pressed.
- The confirm moves focus to Cancel.

## Motion

- Opens from the center in 180 ms, scaling from 0.96 while the scrim fades in. Closes in 120 ms.
- The highlight glides between rows in 100 ms, and the key you pressed flashes in the footer.
- Rows fade in 120 ms as the search filters.
- Submenus slide in 16 px over 200 ms and the chip scales in.
- With reduced motion, everything appears in place.