CommandItem
Source: client/lib/theme/vueda-tailwind/controls/index.js
A single result row inside a CommandGroup.root. See also: 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 (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action.
Vue component: CommandItem
| Slot | Default classes | Description |
|---|---|---|
| root | 3 classes | A single result row inside a CommandGroup.root. See also: 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 (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action. |
root
A single result row inside a CommandGroup.root. See also: 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 (rather than ComboboxItemIndicator.root) marks the kbd hint for invoking the action.
Default classes:
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-4Source: client/lib/theme/vueda-tailwind/controls/CommandItem.theme.js:17