Docs
Command

Command

Fast, composable, unstyled command menu for Svelte.

About

The <Command /> component uses the cmdk-sv library to provide a fast, composable, unstyled command menu for Svelte.

Installation

	npx  shadcn-svelte@latest add command

Usage

	<script lang="ts">
  import * as Command from "$lib/components/ui/command";
</script>
 
<Command.Root>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>Profile</Command.Item>
      <Command.Item>Billing</Command.Item>
      <Command.Item>Settings</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

Examples

Dialog

To show the command menu in a dialog, use the <Command.Dialog /> component instead of <Command.Root />. It accepts props for both the <Dialog.Root /> and <Command.Root /> components.

	<script lang="ts">
  import * as Command from "$lib/components/ui/command";
  import { onMount } from "svelte";
 
  let open = false;
 
  onMount(() => {
    function handleKeydown(e: KeyboardEvent) {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        open = !open;
      }
    }
 
    document.addEventListener("keydown", handleKeydown);
 
    return () => {
      document.removeEventListener("keydown", handleKeydown);
    };
  });
</script>
 
<Command.Dialog bind:open>
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>Calendar</Command.Item>
      <Command.Item>Search Emoji</Command.Item>
      <Command.Item>Calculator</Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>