cmdk-svelte

⌘K for Svelte

This is an implementation of Paco's cmdk for Svelte.

It is not complete, it is not perfect, but it's functional.

Install

npm install cmdk-svelte

Use

<script>
	import { Command } from 'cmdk-svelte';

	let open = false;
	let value = '';
</script>

<svelte:window
	on:keydown={(e) => {
		if (e.metaKey && e.key == 'k') {
			open = !open;
		}
		if (e.key == 'Escape') {
			open = false;
		}
	}}
	on:pointerdown={() => (open = false)}
/>

<Command.Dialog {open}>
	<Command.Overlay />
	<Command.Content>
		<Command.Input bind:value />
		<Command.List>
			<Command.Empty>No results found.</Command.Empty>
			<Command.Group heading="Projects">
				<Command.Item onSelect={()=>{}}>Search Projects...</Command.Item>
				<Command.Item>...</Command.Item>
			</Command.Group>
		</Command.List>
	</Command.Content>
</Command.Dialog>