---
title: "Command"
description: "Command palette primitives built on cmdk — list, item, group, dialog variant."
section: "Libraries"
group: "UI components"
order: 509
---

## Usage

```tsx
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@aeontel/ui";

<Command>
  <CommandInput placeholder="Search agents..." />
  <CommandList>
    <CommandEmpty>No results.</CommandEmpty>
    <CommandGroup heading="Agents">
      {agents.map((a) => (
        <CommandItem key={a.id} onSelect={() => onPick(a)}>
          {a.name}
        </CommandItem>
      ))}
    </CommandGroup>
  </CommandList>
</Command>;
```

## Exports

### `Command`

Command palette root.

```ts
Command(props: React.ComponentProps<typeof CommandPrimitive>): JSX.Element
```

### `CommandDialog`

Command palette rendered inside a modal dialog.

```ts
CommandDialog(props: Omit<React.ComponentProps<typeof Dialog>, "children"> & { title?: string; description?: string; className?: string; showCloseButton?: boolean; children: React.ReactNode; }): JSX.Element
```

**Props**

| Prop               | Type                   | Default                            | Description |
| ------------------ | ---------------------- | ---------------------------------- | ----------- |
| `title?`           | `string \| undefined`  | `"Command Palette"`                |             |
| `description?`     | `string \| undefined`  | `"Search for a command to run..."` |             |
| `className?`       | `string \| undefined`  | —                                  |             |
| `showCloseButton?` | `boolean \| undefined` | `false`                            |             |
| `children`         | `React.ReactNode`      | —                                  |             |

### `CommandInput`

Search input for the command palette.

```ts
CommandInput(props: React.ComponentProps<typeof CommandPrimitive.Input>): JSX.Element
```

### `CommandList`

List of command items.

```ts
CommandList(props: React.ComponentProps<typeof CommandPrimitive.List>): JSX.Element
```

### `CommandEmpty`

Rendered when no items match the current search.

```ts
CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>): JSX.Element
```

### `CommandGroup`

Group of related commands with a heading.

```ts
CommandGroup(props: React.ComponentProps<typeof CommandPrimitive.Group>): JSX.Element
```

### `CommandItem`

Individual selectable command.

```ts
CommandItem(props: React.ComponentProps<typeof CommandPrimitive.Item>): JSX.Element
```

### `CommandSeparator`

Divider between command groups.

```ts
CommandSeparator(props: React.ComponentProps<typeof CommandPrimitive.Separator>): JSX.Element
```

### `CommandShortcut`

Keyboard shortcut hint shown alongside a command item.

```ts
CommandShortcut(props: React.ComponentProps<"span">): JSX.Element
```