---
title: Command
description: Command menu for search and quick actions.
---

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/command"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ CommandDemo() {
	@command.Command(command.Props{Class: "max-w-sm rounded-lg border"}) {
		@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
		@command.List() {
			@command.Empty() {
				No results found.
			}
			@command.Group(command.GroupProps{Heading: "Suggestions"}) {
				@command.Item() {
					@icon.Calendar()
					<span>Calendar</span>
				}
				@command.Item() {
					@icon.Smile()
					<span>Search Emoji</span>
				}
				@command.Item(command.ItemProps{Disabled: true}) {
					@icon.Calculator()
					<span>Calculator</span>
				}
			}
			@command.Separator()
			@command.Group(command.GroupProps{Heading: "Settings"}) {
				@command.Item() {
					@icon.User()
					<span>Profile</span>
					@command.Shortcut() {
						⌘P
					}
				}
				@command.Item() {
					@icon.CreditCard()
					<span>Billing</span>
					@command.Shortcut() {
						⌘B
					}
				}
				@command.Item() {
					@icon.Settings()
					<span>Settings</span>
					@command.Shortcut() {
						⌘S
					}
				}
			}
		}
	}
}
```

## About

The `Command` component is a native templ and vanilla JavaScript port of the [`cmdk`](https://github.com/pacocoursey/cmdk) component, no external dependencies.

## Installation

<CodeTabs>

<TabsList>
  <TabsTrigger value="cli">Command</TabsTrigger>
  <TabsTrigger value="manual">Manual</TabsTrigger>
</TabsList>
<TabsContent value="cli">

```bash
shadcn-templ add command
```

</TabsContent>

<TabsContent value="manual">

<Steps className="mb-0 pt-2">

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="command" title="components/command/command.templ" />

<ComponentSource name="command" title="components/command/command.js" />

Component scripts are loaded through the shared script bundle, see [JavaScript](/docs/installation#javascript).

<Step>Update the import paths to match your project setup.</Step>

</Steps>

</TabsContent>

</CodeTabs>

## Usage

```go showLineNumbers
import "github.com/axadrn/shadcn-templ/v2/components/command"
```

```templ showLineNumbers
@command.Command(command.Props{Class: "max-w-sm rounded-lg border"}) {
	@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
	@command.List() {
		@command.Empty() {
			No results found.
		}
		@command.Group(command.GroupProps{Heading: "Suggestions"}) {
			@command.Item() {
				Calendar
			}
			@command.Item() {
				Search Emoji
			}
			@command.Item() {
				Calculator
			}
		}
		@command.Separator()
		@command.Group(command.GroupProps{Heading: "Settings"}) {
			@command.Item() {
				Profile
			}
			@command.Item() {
				Billing
			}
			@command.Item() {
				Settings
			}
		}
	}
}
```

## Composition

Use the following composition to build a `Command`:

```text
command.Command
├── command.Input
└── command.List
    ├── command.Empty
    ├── command.Group
    │   ├── command.Item
    │   └── command.Item
    ├── command.Separator
    └── command.Group
        ├── command.Item
        └── command.Item
```

## Basic

A simple command menu in a dialog.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/command"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
)

templ CommandBasic() {
	<div class="flex flex-col gap-4">
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Class:      "w-fit",
			Attributes: dialog.TriggerFor("command-basic"),
		}) {
			Open Menu
		}
		@command.Dialog(command.DialogProps{ID: "command-basic"}) {
			@command.Command() {
				@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
				@command.List() {
					@command.Empty() {
						No results found.
					}
					@command.Group(command.GroupProps{Heading: "Suggestions"}) {
						@command.Item() {
							Calendar
						}
						@command.Item() {
							Search Emoji
						}
						@command.Item() {
							Calculator
						}
					}
				}
			}
		}
	</div>
}
```

## Shortcuts

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/command"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ CommandShortcuts() {
	<div class="flex flex-col gap-4">
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Class:      "w-fit",
			Attributes: dialog.TriggerFor("command-shortcuts"),
		}) {
			Open Menu
		}
		@command.Dialog(command.DialogProps{ID: "command-shortcuts"}) {
			@command.Command() {
				@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
				@command.List() {
					@command.Empty() {
						No results found.
					}
					@command.Group(command.GroupProps{Heading: "Settings"}) {
						@command.Item() {
							@icon.User()
							<span>Profile</span>
							@command.Shortcut() {
								⌘P
							}
						}
						@command.Item() {
							@icon.CreditCard()
							<span>Billing</span>
							@command.Shortcut() {
								⌘B
							}
						}
						@command.Item() {
							@icon.Settings()
							<span>Settings</span>
							@command.Shortcut() {
								⌘S
							}
						}
					}
				}
			}
		}
	</div>
}
```

## Groups

A command menu with groups, icons and separators.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/command"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ CommandGroups() {
	<div class="flex flex-col gap-4">
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Class:      "w-fit",
			Attributes: dialog.TriggerFor("command-groups"),
		}) {
			Open Menu
		}
		@command.Dialog(command.DialogProps{ID: "command-groups"}) {
			@command.Command() {
				@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
				@command.List() {
					@command.Empty() {
						No results found.
					}
					@command.Group(command.GroupProps{Heading: "Suggestions"}) {
						@command.Item() {
							@icon.Calendar()
							<span>Calendar</span>
						}
						@command.Item() {
							@icon.Smile()
							<span>Search Emoji</span>
						}
						@command.Item() {
							@icon.Calculator()
							<span>Calculator</span>
						}
					}
					@command.Separator()
					@command.Group(command.GroupProps{Heading: "Settings"}) {
						@command.Item() {
							@icon.User()
							<span>Profile</span>
							@command.Shortcut() {
								⌘P
							}
						}
						@command.Item() {
							@icon.CreditCard()
							<span>Billing</span>
							@command.Shortcut() {
								⌘B
							}
						}
						@command.Item() {
							@icon.Settings()
							<span>Settings</span>
							@command.Shortcut() {
								⌘S
							}
						}
					}
				}
			}
		}
	</div>
}
```

## Scrollable

Scrollable command menu with multiple items.

```templ
package examples

import (
	"github.com/axadrn/shadcn-templ/v2/components/button"
	"github.com/axadrn/shadcn-templ/v2/components/command"
	"github.com/axadrn/shadcn-templ/v2/components/dialog"
	"github.com/axadrn/shadcn-templ/v2/components/icon"
)

templ CommandScrollable() {
	<div class="flex flex-col gap-4">
		@button.Button(button.Props{
			Variant:    button.VariantOutline,
			Class:      "w-fit",
			Attributes: dialog.TriggerFor("command-scrollable"),
		}) {
			Open Menu
		}
		@command.Dialog(command.DialogProps{ID: "command-scrollable"}) {
			@command.Command() {
				@command.Input(command.InputProps{Placeholder: "Type a command or search..."})
				@command.List() {
					@command.Empty() {
						No results found.
					}
					@command.Group(command.GroupProps{Heading: "Navigation"}) {
						@command.Item() {
							@icon.House()
							<span>Home</span>
							@command.Shortcut() {
								⌘H
							}
						}
						@command.Item() {
							@icon.Inbox()
							<span>Inbox</span>
							@command.Shortcut() {
								⌘I
							}
						}
						@command.Item() {
							@icon.FileText()
							<span>Documents</span>
							@command.Shortcut() {
								⌘D
							}
						}
						@command.Item() {
							@icon.Folder()
							<span>Folders</span>
							@command.Shortcut() {
								⌘F
							}
						}
					}
					@command.Separator()
					@command.Group(command.GroupProps{Heading: "Actions"}) {
						@command.Item() {
							@icon.Plus()
							<span>New File</span>
							@command.Shortcut() {
								⌘N
							}
						}
						@command.Item() {
							@icon.FolderPlus()
							<span>New Folder</span>
							@command.Shortcut() {
								⇧⌘N
							}
						}
						@command.Item() {
							@icon.Copy()
							<span>Copy</span>
							@command.Shortcut() {
								⌘C
							}
						}
						@command.Item() {
							@icon.Scissors()
							<span>Cut</span>
							@command.Shortcut() {
								⌘X
							}
						}
						@command.Item() {
							@icon.ClipboardPaste()
							<span>Paste</span>
							@command.Shortcut() {
								⌘V
							}
						}
						@command.Item() {
							@icon.Trash()
							<span>Delete</span>
							@command.Shortcut() {
								⌫
							}
						}
					}
					@command.Separator()
					@command.Group(command.GroupProps{Heading: "View"}) {
						@command.Item() {
							@icon.LayoutGrid()
							<span>Grid View</span>
						}
						@command.Item() {
							@icon.List()
							<span>List View</span>
						}
						@command.Item() {
							@icon.ZoomIn()
							<span>Zoom In</span>
							@command.Shortcut() {
								⌘+
							}
						}
						@command.Item() {
							@icon.ZoomOut()
							<span>Zoom Out</span>
							@command.Shortcut() {
								⌘-
							}
						}
					}
					@command.Separator()
					@command.Group(command.GroupProps{Heading: "Account"}) {
						@command.Item() {
							@icon.User()
							<span>Profile</span>
							@command.Shortcut() {
								⌘P
							}
						}
						@command.Item() {
							@icon.CreditCard()
							<span>Billing</span>
							@command.Shortcut() {
								⌘B
							}
						}
						@command.Item() {
							@icon.Settings()
							<span>Settings</span>
							@command.Shortcut() {
								⌘S
							}
						}
						@command.Item() {
							@icon.Bell()
							<span>Notifications</span>
						}
						@command.Item() {
							@icon.CircleQuestionMark()
							<span>Help & Support</span>
						}
					}
					@command.Separator()
					@command.Group(command.GroupProps{Heading: "Tools"}) {
						@command.Item() {
							@icon.Calculator()
							<span>Calculator</span>
						}
						@command.Item() {
							@icon.Calendar()
							<span>Calendar</span>
						}
						@command.Item() {
							@icon.Image()
							<span>Image Editor</span>
						}
						@command.Item() {
							@icon.Code()
							<span>Code Editor</span>
						}
					}
				}
			}
		}
	</div>
}
```

## API Reference

### Command

The `Command` component is the root that manages filtering and selection.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `ID`    | `string` | -       |
| `Label` | `string` | -       |
| `Class` | `string` | -       |

### Dialog

The `command.Dialog` component renders the command menu in a dialog. Open it
from any element via `dialog.TriggerFor(id)`.

| Prop              | Type     | Default                            |
| ----------------- | -------- | ---------------------------------- |
| `ID`              | `string` | -                                  |
| `Title`           | `string` | `"Command Palette"`                |
| `Description`     | `string` | `"Search for a command to run..."` |
| `ShowCloseButton` | `bool`   | `false`                            |
| `Class`           | `string` | -                                  |

### Input

The `command.Input` component is the search input that filters the list.

| Prop          | Type     | Default |
| ------------- | -------- | ------- |
| `Placeholder` | `string` | -       |
| `Disabled`    | `bool`   | `false` |
| `Class`       | `string` | -       |

### List

The `command.List` component holds the filterable items.

| Prop    | Type     | Default         |
| ------- | -------- | --------------- |
| `Label` | `string` | `"Suggestions"` |
| `Class` | `string` | -               |

### Empty

The `command.Empty` component shows while no item matches the search.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Group

The `command.Group` component wraps related items.

| Prop      | Type     | Default |
| --------- | -------- | ------- |
| `Heading` | `string` | -       |
| `Class`   | `string` | -       |

### Item

The `command.Item` component is a selectable command.

| Prop       | Type     | Default |
| ---------- | -------- | ------- |
| `Value`    | `string` | -       |
| `Disabled` | `bool`   | `false` |
| `Class`    | `string` | -       |

### Shortcut

The `command.Shortcut` component displays a keyboard shortcut on an item.

| Prop    | Type     | Default |
| ------- | -------- | ------- |
| `Class` | `string` | -       |

### Separator

The `command.Separator` component divides groups. It hides while searching
unless `AlwaysRender` is set, exactly like cmdk.

| Prop           | Type     | Default |
| -------------- | -------- | ------- |
| `AlwaysRender` | `bool`   | `false` |
| `Class`        | `string` | -       |