Command

A fast, composable command palette / searchable list.

↑↓ Navigate Enter Select

Installation

npx lily-svelte@latest add command

Installs the style saved in lily.json. For a new Diamond project, run lily-svelte init --style diamond first.

Install the lily base and `utils` (run once per project).

npx lily-svelte@latest init

Copy the command source from the registry into `$lib/components/ui/command`.

Usage

Focus the search field and type to filter commands. Use ↑ / ↓ to move through matching items and Enter to select. Set loop on Command.Root to wrap at the ends. Attach onSelect to each Command.Item to run its action; pointer and keyboard selection use the same callback.

<script lang="ts">
	import * as Command from '$lib/components/ui/command';
</script>
 
<Command.Root>
	<Command.Input placeholder="Type a command…" />
	<Command.List>
		<Command.Empty>No results found.</Command.Empty>
		<Command.Group heading="Suggestions">
			<Command.Item>Calendar</Command.Item>
			<Command.Item>Search</Command.Item>
		</Command.Group>
	</Command.List>
</Command.Root>

← Collapsible Context Menu →