# Command

A command palette component built with Dialog and Autocomplete for searching and executing commands.

## Installation

Start from a Svelte 5 application, then install the component package, shared theme, and Bits UI peer:

```bash
pnpm add coss-svelte @coss-svelte/theme bits-ui
```

Import `@coss-svelte/theme/style-coss.css` after Tailwind from the application's global stylesheet.

## Usage

```svelte
<script lang="ts">
import { ArrowDown, ArrowUp, CornerDownLeft } from "@lucide/svelte";
import {
	Command,
	CommandDialog,
	CommandDialogPopup,
	CommandDialogTrigger,
	CommandEmpty,
	CommandFooter,
	CommandGroup,
	CommandGroupLabel,
	CommandInput,
	CommandItem,
	CommandList,
	CommandPanel,
	CommandSeparator,
	CommandShortcut,
	Kbd,
	KbdGroup,
} from "coss-svelte";

const groups = [
	{
		label: "Suggestions",
		items: [
			{ label: "Linear", shortcut: "⌘L", value: "linear" },
			{ label: "Figma", shortcut: "⌘F", value: "figma" },
			{ label: "Slack", shortcut: "⌘S", value: "slack" },
			{ label: "YouTube", shortcut: "⌘Y", value: "youtube" },
			{ label: "Raycast", shortcut: "⌘R", value: "raycast" },
		],
	},
	{
		label: "Commands",
		items: [
			{ label: "Clipboard History", shortcut: "⌘⇧C", value: "clipboard-history" },
			{ label: "Import Extension", shortcut: "⌘I", value: "import-extension" },
			{ label: "Create Snippet", shortcut: "⌘N", value: "create-snippet" },
			{ label: "System Preferences", shortcut: "⌘,", value: "system-preferences" },
			{ label: "Window Management", shortcut: "⌘⇧W", value: "window-management" },
		],
	},
];

let open = $state(false);

function handleKeydown(event: KeyboardEvent) {
	if (event.key === "j" && (event.metaKey || event.ctrlKey)) {
		event.preventDefault();
		open = !open;
	}
}
</script>

<svelte:window onkeydown={handleKeydown} />

<CommandDialog bind:open>
	<CommandDialogTrigger>
		Open Command Palette
		<KbdGroup>
			<Kbd>⌘</Kbd>
			<Kbd>J</Kbd>
		</KbdGroup>
	</CommandDialogTrigger>
	<CommandDialogPopup>
		<Command label="Command palette">
			<CommandInput placeholder="Search for apps and commands..." />
			<CommandList>
				<CommandPanel>
					<CommandEmpty>No results found.</CommandEmpty>
					{#each groups as group, index}
						{#if index > 0}
							<CommandSeparator />
						{/if}
						<CommandGroup>
							<CommandGroupLabel>{group.label}</CommandGroupLabel>
							{#each group.items as item}
								<CommandItem value={item.value} onclick={() => (open = false)}>
									<span class="flex-1">{item.label}</span>
									<CommandShortcut>{item.shortcut}</CommandShortcut>
								</CommandItem>
							{/each}
						</CommandGroup>
					{/each}
				</CommandPanel>
			</CommandList>
			<CommandFooter>
				<div class="flex items-center gap-4">
					<div class="flex items-center gap-2">
						<KbdGroup>
							<Kbd><ArrowUp /></Kbd>
							<Kbd><ArrowDown /></Kbd>
						</KbdGroup>
						<span>Navigate</span>
					</div>
					<div class="flex items-center gap-2">
						<Kbd><CornerDownLeft /></Kbd>
						<span>Open</span>
					</div>
				</div>
				<div class="flex items-center gap-2">
					<Kbd>Esc</Kbd>
					<span>Close</span>
				</div>
			</CommandFooter>
		</Command>
	</CommandDialogPopup>
</CommandDialog>

```

## Anatomy

- `Command`
- `CommandCollection`
- `CommandDialog`
- `CommandDialogPopup`
- `CommandDialogTrigger`
- `CommandEmpty`
- `CommandFooter`
- `CommandGroup`
- `CommandGroupLabel`
- `CommandInput`
- `CommandItem`
- `CommandList`
- `CommandPanel`
- `CommandSeparator`
- `CommandShortcut`

## API Reference

### Command

A command palette component built with Dialog and Autocomplete for searching and executing commands.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:value` | `string` | `""` | Current value for the component. Bind with `bind:value` when supported. |
| `items` | `CommandItem[]` | `[]` | Items rendered by the component's built-in fallback composition. |
| `placeholder` | `string` | `"Type a command"` | Placeholder text shown by the built-in input. |
| `label` | `string` | `"Command menu"` | Accessible label or fallback visible label for the control. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Root](https://bits-ui.com/docs/components/command#root).

### CommandCollection

Connects repeated items to the parent collection state.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.GroupItems](https://bits-ui.com/docs/components/command#group-items).

### CommandDialog

Composes the parent component into a dialog-style surface.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:open` | `boolean` | `false` | Open state for the popup or disclosure. Bind with `bind:open`. |

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Bits UI Dialog.Root](https://bits-ui.com/docs/components/dialog#root).

### CommandDialogPopup

Renders the floating or modal surface for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `portalProps` | `{ disabled?: boolean; to?: PortalTarget }` | `{}` | Configures the exact Bits Portal target (`to`) or renders inline when `disabled`. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Content](https://bits-ui.com/docs/components/dialog#content).

### CommandDialogTrigger

Renders the control that opens, closes, or selects related content.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Dialog.Trigger](https://bits-ui.com/docs/components/dialog#trigger).

### CommandEmpty

Renders fallback content when the collection has no results.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Empty](https://bits-ui.com/docs/components/command#empty).

### CommandFooter

Groups footer content and actions for the parent component.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

### CommandGroup

Groups related items inside the parent component.

| Prop | Type | Description |
| --- | --- | --- |
| `forceMount` | `boolean` | Keeps content mounted while closed so transitions can complete. |

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Group](https://bits-ui.com/docs/components/command#group).

### CommandGroupLabel

Labels a group of related items.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.GroupHeading](https://bits-ui.com/docs/components/command#group-heading).

### CommandInput

Renders the input field for the parent component.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `bind:value` | `string` | `""` | Current value for the component. Bind with `bind:value` when supported. |

**Composition and refs**

- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Input](https://bits-ui.com/docs/components/command#input).

### CommandItem

Renders one selectable or repeated item.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Item](https://bits-ui.com/docs/components/command#item).

### CommandList

Wraps a list of related items.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.List](https://bits-ui.com/docs/components/command#list).

### CommandPanel

Renders the main panel surface for the parent component.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Viewport](https://bits-ui.com/docs/components/command#viewport).

### CommandSeparator

Visually separates related content.

**Composition and refs**

- `children: Snippet<[]>`
- `bind:ref: HTMLElement \| null`

Inherits from [Bits UI Command.Separator](https://bits-ui.com/docs/components/command#separator).

### CommandShortcut

Displays a keyboard shortcut hint.

**Composition and refs**

- `children: Snippet<[]>`

Inherits from [Svelte component attributes](https://svelte.dev/docs/svelte/basic-markup#Attributes).

## Implementation Details

| Field | Value |
| --- | --- |
| Status | Stable |
| Foundation | compound |
| Category | Overlays & Popups |
| Particles | 2 |

## Status

Stable for the current coss-svelte surface.

## Agent Notes

- Import Svelte exports directly from `coss-svelte`.
- This is Svelte 5 code: use `class`, lowercase event properties, runes, snippets, and documented `bind:*` contracts. Do not emit JSX, React hooks, `className`, `asChild`, or Base UI imports.
- Prefer this route's example and generated API table over React COSS snippets; COSS React particles are design references only.
- The copy-and-own registry is a preview. Inspect `/r/command.json` for the complete local file and dependency closure.
- Command is stable in the current source catalog.