Command

Command is a filterable command palette — a search input paired with keyboard-navigable, groupable results. Reach for it for quick-switchers, action menus, or ⌘K-style palettes where users type to narrow a large set of actions or destinations. Anatomy: Command (root) wraps a CommandInput (search field) and a CommandList (scroll region), which holds a CommandViewport (padded inner area). Inside the viewport, CommandEmpty renders the no-results message, CommandGroup sections bundle a CommandGroupHeading with a CommandGroupItems list of selectable CommandItems, and CommandSeparator divides adjacent groups.

Anatomy

Command wraps a CommandInput and a CommandList, whose CommandViewport holds CommandGroup sections and the CommandEmpty message. Filtering is built in and runs as the reader types — set shouldFilter={false} only when the results come from somewhere else. CommandInput stays unboxed on purpose: it is the palette's header, and a fill would put a second panel inside the popover.

<div class="bg-popover surface-sheen w-full max-w-md rounded-lg [--surface:var(--popover)]">
	<Command label="Go to">
		<CommandInput placeholder="Search orders, products, settings…" />
		<CommandList>
			<CommandViewport>
				<CommandEmpty>Nothing matches that.</CommandEmpty>
				<CommandGroup>
					<CommandGroupHeading>Go to</CommandGroupHeading>
					<CommandGroupItems>
						<CommandItem value="orders">
							<ShoppingCart class="size-4" /> Orders
						</CommandItem>
						<CommandItem value="products">
							<Package class="size-4" /> Products
						</CommandItem>
						<CommandItem value="storefront">
							<Store class="size-4" /> Storefront
						</CommandItem>
					</CommandGroupItems>
				</CommandGroup>
				<CommandSeparator />
				<CommandGroup>
					<CommandGroupHeading>Settings</CommandGroupHeading>
					<CommandGroupItems>
						<CommandItem value="payouts">
							<CreditCard class="size-4" /> Payout schedule
						</CommandItem>
						<CommandItem value="general">
							<Settings class="size-4" /> General
						</CommandItem>
					</CommandGroupItems>
				</CommandGroup>
			</CommandViewport>
		</CommandList>
	</Command>
</div>

As a ⌘K palette

Put it in a Dialog and give the dialog p-1! — a popover's outer container wants a small pad, not the component's default p-4, which reads as bloated for a short list. The dialog needs a title for assistive technology even when nothing visible carries one; sr-only is the right home for it. This is exactly how the search in this site's own header is built.

<Dialog>
	<DialogTrigger>
		<Button variant="secondary">Open palette</Button>
	</DialogTrigger>
	<DialogContent class="gap-0! p-1!">
		<DialogTitle class="sr-only">Search</DialogTitle>
		<Command label="Search">
			<CommandInput placeholder="Type a command or search…" />
			<CommandList>
				<CommandViewport>
					<CommandEmpty>Nothing matches that.</CommandEmpty>
					<CommandGroup>
						<CommandGroupHeading>Actions</CommandGroupHeading>
						<CommandGroupItems>
							<CommandItem value="new-order">Create order</CommandItem>
							<CommandItem value="refund">Refund an order</CommandItem>
							<CommandItem value="invite" disabled
								>Invite a teammate</CommandItem
							>
						</CommandGroupItems>
					</CommandGroup>
				</CommandViewport>
			</CommandList>
		</Command>
	</DialogContent>
</Dialog>

API

`Command`

Prop	Type	Description
`children`	`import('svelte').Snippet`	Palette content (input, list, groups).
`class`	`string`	Additional Tailwind classes merged onto the root element.
`value`	`string`	Value of the currently highlighted item (forwarded via `...rest`). Bindable — reflects keyboard and pointer navigation.
`onValueChange`	`(value: string) => void`	Callback fired when the highlighted item value changes (forwarded via `...rest`).
`loop`	`boolean`	Whether keyboard navigation wraps from the last item back to the first (forwarded via `...rest`).
`shouldFilter`	`boolean`	Whether the built-in fuzzy filtering runs as the user types (forwarded via `...rest`). Disable to filter results yourself.
`label`	`string`	Accessible label for the palette, announced to screen readers (forwarded via `...rest`).
`disablePointerSelection`	`boolean`	When true, hovering does not change the highlighted item (forwarded via `...rest`).
`vimBindings`	`boolean`	Enables vim-style navigation keys (Ctrl+N / Ctrl+P / Ctrl+J / Ctrl+K) (forwarded via `...rest`).
`columns`	`number`	Column count for grid-style layouts, used to drive arrow-key navigation (forwarded via `...rest`).

`CommandInput`

The search field of a Command palette, paired with a leading search icon.

Prop	Type	Default	Description
`value` bindable	`string`	`''`	Current query text. Bindable for two-way control.
`class`	`string`		Additional Tailwind classes merged onto the input.

`CommandList`

The scrollable region of a Command palette, capped at max-h-72 with a fade at the scroll edge.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Content to scroll, typically a `CommandViewport`.
`class`	`string`		Additional Tailwind classes merged onto the scroll container.

`CommandViewport`

The padded inner area of a Command palette's list, holding groups and items.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Groups, items, or the empty state.
`class`	`string`		Additional Tailwind classes merged onto the viewport.

`CommandEmpty`

The no-results message shown when a Command query matches no items.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Empty-state message content.
`class`	`string`		Additional Tailwind classes merged onto the element.

`CommandGroup`

A section within a Command palette, bundling a CommandGroupHeading with a CommandGroupItems list.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		A `CommandGroupHeading` and `CommandGroupItems`.
`class`	`string`		Additional Tailwind classes merged onto the group.

`CommandGroupHeading`

The label of a CommandGroup.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		Group label text.
`class`	`string`		Additional Tailwind classes merged onto the heading.

`CommandGroupItems`

The list of selectable CommandItems within a CommandGroup.

Prop	Type	Default	Description
`children`	`import('svelte').Snippet`		One or more `CommandItem`s.
`class`	`string`		Additional Tailwind classes merged onto the list.

`CommandItem`

A single selectable result within a Command palette.

Prop	Type	Description
`children`	`import('svelte').Snippet`	Item content (icon and label).
`class`	`string`	Additional Tailwind classes merged onto the item.
`value`	`string`	The item's filter/select value (forwarded via `...rest`).
`disabled`	`boolean`	Excludes the item from pointer and keyboard selection (forwarded via `...rest`).

`CommandSeparator`

A visual divider between adjacent CommandGroups.

Prop	Type	Default	Description
`class`	`string`		Additional Tailwind classes merged onto the divider.