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

# Command

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

> The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root), [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root), and optional [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root) into one chip, and `overflow-hidden` lets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a [CommandDialog.content](/v3/reference/theming/keys/CommandDialog.md#theme-key-CommandDialog-content).

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/Command.md#theme-key-Command-root) | `bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-vueda-card` | The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root), [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root), and optional [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root) into one chip, and `overflow-hidden` lets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a [CommandDialog.content](/v3/reference/theming/keys/CommandDialog.md#theme-key-CommandDialog-content). |

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

## root

> The outer Command surface (a search + categorised result list). 4px card radius rather than the 2px control radius the rest of the picker family wears, because Command is a shell surface, not a slab control. The flex-column layout stacks [CommandInput.root](/v3/reference/theming/keys/CommandInput.md#theme-key-CommandInput-root), [CommandList.root](/v3/reference/theming/keys/CommandList.md#theme-key-CommandList-root), and optional [CommandFooter.root](/v3/reference/theming/keys/CommandFooter.md#theme-key-CommandFooter-root) into one chip, and `overflow-hidden` lets the inner list scroll without escaping the rounded corners. Used inline or hosted inside a [CommandDialog.content](/v3/reference/theming/keys/CommandDialog.md#theme-key-CommandDialog-content).

Default classes:

`bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-vueda-card`

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