Command

Fast, composable, unstyled command menu for Svelte.

<script lang="ts">
  import CalculatorIcon from "phosphor-svelte/lib/CalculatorIcon";
  import CalendarIcon from "phosphor-svelte/lib/CalendarIcon";
  import CreditCardIcon from "phosphor-svelte/lib/CreditCardIcon";
  import GearIcon from "phosphor-svelte/lib/GearIcon";
  import SmileyIcon from "phosphor-svelte/lib/SmileyIcon";
  import UserIcon from "phosphor-svelte/lib/UserIcon";
  import * as Command from "$lib/components/ui/command/index.js";
</script>
 
<Command.Root class="rounded-lg border shadow-md md:min-w-[450px]">
  <Command.Input placeholder="Type a command or search..." />
  <Command.List>
    <Command.Empty>No results found.</Command.Empty>
    <Command.Group heading="Suggestions">
      <Command.Item>
        <CalendarIcon />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <SmileyIcon />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item disabled>
        <CalculatorIcon />
        <span>Calculator</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <UserIcon />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCardIcon />
        <span>Billing</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <GearIcon />
        <span>Settings</span>
        <Command.Shortcut>⌘S</Command.Shortcut>
      </Command.Item>
    </Command.Group>
  </Command.List>
</Command.Root>

Installation

pnpm dlx jsrepo@latest add command

npx jsrepo@latest add command

yarn dlx jsrepo@latest add command

bunx jsrepo@latest add command

Install bits-ui:

pnpm add bits-ui -D

npm install bits-ui -D

yarn add bits-ui -D

bun add bits-ui -D

Copy and paste the following code into your project.

<script lang="ts">
  import type { Command as CommandPrimitive, Dialog as DialogPrimitive } from 'bits-ui';
  import type { Snippet } from 'svelte';
  import Command from './command.svelte';
  import * as Dialog from '$lib/components/ui/dialog/index.js';
  import { cn, type WithoutChildrenOrChild } from '$lib/utils.js';

  let {
    open = $bindable(false),
    ref = $bindable(null),
    value = $bindable(''),
    title = 'Command Palette',
    description = 'Search for a command to run...',
    showCloseButton = false,
    portalProps,
    children,
    class: className,
    ...restProps
  }: WithoutChildrenOrChild<DialogPrimitive.RootProps> &
    WithoutChildrenOrChild<CommandPrimitive.RootProps> & {
      portalProps?: DialogPrimitive.PortalProps;
      children: Snippet;
      title?: string;
      description?: string;
      showCloseButton?: boolean;
      class?: string;
    } = $props();
</script>

<Dialog.Root bind:open {...restProps}>
  <Dialog.Header class="sr-only">
    <Dialog.Title>{title}</Dialog.Title>
    <Dialog.Description>{description}</Dialog.Description>
  </Dialog.Header>
  <Dialog.Content
    class={cn('top-1/3 translate-y-0 overflow-hidden border-border bg-popover p-0 ', className)}
    {showCloseButton}
    {portalProps}
  >
    <Command {...restProps} bind:value bind:ref {children} />
  </Dialog.Content>
</Dialog.Root>

Usage

<script lang="ts">
  import * as Command from '$lib/components/ui/command/index.js';
</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

Press ⌘J

<script lang="ts">
  import CalculatorIcon from "phosphor-svelte/lib/CalculatorIcon";
  import CalendarIcon from "phosphor-svelte/lib/CalendarIcon";
  import CreditCardIcon from "phosphor-svelte/lib/CreditCardIcon";
  import GearIcon from "phosphor-svelte/lib/GearIcon";
  import SmileyIcon from "phosphor-svelte/lib/SmileyIcon";
  import UserIcon from "phosphor-svelte/lib/UserIcon";
  import * as Command from "$lib/components/ui/command/index.js";
 
  let open = $state(false);
 
  function handleKeydown(e: KeyboardEvent) {
    if (e.key === "j" && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      open = !open;
    }
  }
</script>
 
<svelte:document onkeydown={handleKeydown} />
 
<p class="text-muted-foreground text-sm">
  Press
  <kbd
    class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium opacity-100 select-none"
  >
    <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>
        <CalendarIcon class="me-2 size-4" />
        <span>Calendar</span>
      </Command.Item>
      <Command.Item>
        <SmileyIcon class="me-2 size-4" />
        <span>Search Emoji</span>
      </Command.Item>
      <Command.Item>
        <CalculatorIcon class="me-2 size-4" />
        <span>Calculator</span>
      </Command.Item>
    </Command.Group>
    <Command.Separator />
    <Command.Group heading="Settings">
      <Command.Item>
        <UserIcon class="me-2 size-4" />
        <span>Profile</span>
        <Command.Shortcut>⌘P</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <CreditCardIcon class="me-2 size-4" />
        <span>Billing</span>
        <Command.Shortcut>⌘B</Command.Shortcut>
      </Command.Item>
      <Command.Item>
        <GearIcon class="me-2 size-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.

lib/components/example-command-menu.svelte

<script lang="ts">
  import * as Command from '$lib/components/ui/command/index.js';
  import { onMount } from 'svelte';
 
  let open = $state(false);
 
  function handleKeydown(e: KeyboardEvent) {
    if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
      e.preventDefault();
      open = !open;
    }
  }
</script>
 
<svelte:document onkeydown={handleKeydown} />
 
<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>

Installation #

Usage #

Examples #

Dialog #

Installation

Usage

Examples

Dialog