---
url: "https://vueda.dev/v3/reference/theming/keys/CommandItem.md"
title: "CommandItem"
---

# CommandItem

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> A single result row inside a [CommandGroup.root](/v3/reference/theming/keys/CommandGroup.md#theme-key-CommandGroup-root). See also: [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root); identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where [CommandShortcut.root](/v3/reference/theming/keys/CommandShortcut.md#theme-key-CommandShortcut-root) (rather than [ComboboxItemIndicator.root](/v3/reference/theming/keys/ComboboxItemIndicator.md#theme-key-ComboboxItemIndicator-root)) marks the kbd hint for invoking the action.

Vue component: [CommandItem](/v3/reference/api/vue/CommandItem.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/CommandItem.md#theme-key-CommandItem-root) | 3 classes | A single result row inside a [CommandGroup.root](/v3/reference/theming/keys/CommandGroup.md#theme-key-CommandGroup-root). See also: [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root); identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where [CommandShortcut.root](/v3/reference/theming/keys/CommandShortcut.md#theme-key-CommandShortcut-root) (rather than [ComboboxItemIndicator.root](/v3/reference/theming/keys/ComboboxItemIndicator.md#theme-key-ComboboxItemIndicator-root)) marks the kbd hint for invoking the action. |

<a id="theme-key-CommandItem-root"></a>

## root

> A single result row inside a [CommandGroup.root](/v3/reference/theming/keys/CommandGroup.md#theme-key-CommandGroup-root). See also: [ComboboxItem.root](/v3/reference/theming/keys/ComboboxItem.md#theme-key-ComboboxItem-root); identical highlight + disabled + icon-tint recipe so result rows feel the same across both pickers. Command differs only at the row's trailing edge, where [CommandShortcut.root](/v3/reference/theming/keys/CommandShortcut.md#theme-key-CommandShortcut-root) (rather than [ComboboxItemIndicator.root](/v3/reference/theming/keys/ComboboxItemIndicator.md#theme-key-ComboboxItemIndicator-root)) marks the kbd hint for invoking the action.

Default classes:

```text
data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground active:bg-accent-active active:text-accent-foreground
[&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none
data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4
```

Source: `client/lib/theme/vueda-tailwind/controls/CommandItem.theme.js:17`