Command - shadcn-svelte

Docs

Command

Fast, composable, unstyled command menu for Svelte.

Component Source Primitive API Reference

	<script lang="ts">
  import Calendar from "svelte-radix/Calendar.svelte";
  import EnvelopeClosed from "svelte-radix/EnvelopeClosed.svelte";
  import Face from "svelte-radix/Face.svelte";
  import Gear from "svelte-radix/Gear.svelte";
  import Person from "svelte-radix/Person.svelte";
  import Rocket from "svelte-radix/Rocket.svelte";
 
  import * as Command from "$lib/components/ui/command/index.js";
</script>
 
<Command.Root class="max-w-[450px] rounded-lg border shadow-md">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>
        <Calendar class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <Face class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <Rocket class="mr-2 h-4 w-4" />
        <span>Launch</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <Person class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <EnvelopeClosed class="mr-2 h-4 w-4" />
        <span>Mail</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Gear class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

	<script lang="ts">
  import Calculator from "lucide-svelte/icons/calculator";
  import Calendar from "lucide-svelte/icons/calendar";
  import CreditCard from "lucide-svelte/icons/credit-card";
  import Settings from "lucide-svelte/icons/settings";
  import Smile from "lucide-svelte/icons/smile";
  import User from "lucide-svelte/icons/user";
  import * as Command from "$lib/components/ui/command/index.js";
</script>
 
<Command.Root class="max-w-[450px] rounded-lg border shadow-md">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>
        <Calendar class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <Smile class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <Calculator class="mr-2 h-4 w-4" />
        <span>Calculator</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <User class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCard class="mr-2 h-4 w-4" />
        <span>Billing</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Settings class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

About

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

Note: cmdk-sv is a new library and is still in alpha. While I don't anticipate a ton of breaking changes, as the API aligns with the original, I want to bring this to your awareness. If you find any bugs, please open an issue with the library, rather than this project.

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

	<script lang="ts">
  import Calendar from "svelte-radix/Calendar.svelte";
  import EnvelopeClosed from "svelte-radix/EnvelopeClosed.svelte";
  import Face from "svelte-radix/Face.svelte";
  import Gear from "svelte-radix/Gear.svelte";
  import Person from "svelte-radix/Person.svelte";
  import Rocket from "svelte-radix/Rocket.svelte";
 
  import * as Command from "$lib/components/ui/command/index.js";
  import { onMount } from "svelte";
  let open = false;
 
  onMount(() => {
    function handleKeydown(e: KeyboardEvent) {
      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        open = !open;
      }
    }
 
    document.addEventListener("keydown", handleKeydown);
    return () => {
      document.removeEventListener("keydown", handleKeydown);
    };
  });
</script>
 
<p class="text-sm text-muted-foreground">
  Press
  <kbd
    class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
  >
    <span class="text-xs">⌘</span>J
  </kbd>
</p>
<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 class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <Face class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <Rocket class="mr-2 h-4 w-4" />
        <span>Launch</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <Person class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <EnvelopeClosed class="mr-2 h-4 w-4" />
        <span>Mail</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Gear class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Dialog>

	<script lang="ts">
  import Calculator from "lucide-svelte/icons/calculator";
  import Calendar from "lucide-svelte/icons/calendar";
  import CreditCard from "lucide-svelte/icons/credit-card";
  import Settings from "lucide-svelte/icons/settings";
  import Smile from "lucide-svelte/icons/smile";
  import User from "lucide-svelte/icons/user";
  import * as Command from "$lib/components/ui/command/index.js";
  import { onMount } from "svelte";
 
  let open = false;
 
  onMount(() => {
    function handleKeydown(e: KeyboardEvent) {
      if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault();
        open = !open;
      }
    }
 
    document.addEventListener("keydown", handleKeydown);
    return () => {
      document.removeEventListener("keydown", handleKeydown);
    };
  });
</script>
 
<p class="text-sm text-muted-foreground">
  Press
  <kbd
    class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100"
  >
    <span class="text-xs">⌘</span>J
  </kbd>
</p>
<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 class="mr-2 h-4 w-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <Smile class="mr-2 h-4 w-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <Calculator class="mr-2 h-4 w-4" />
        <span>Calculator</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <User class="mr-2 h-4 w-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCard class="mr-2 h-4 w-4" />
        <span>Billing</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <Settings class="mr-2 h-4 w-4" />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.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>

Combobox Context Menu

On This Page