Docs
Command
Command
Fast, composable, unstyled command menu for Svelte.
<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 size-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Face class="mr-2 size-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Rocket class="mr-2 size-4" />
<span>Launch</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<Person class="mr-2 size-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<EnvelopeClosed class="mr-2 size-4" />
<span>Mail</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Gear class="mr-2 size-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 size-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile class="mr-2 size-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Calculator class="mr-2 size-4" />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User class="mr-2 size-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCard class="mr-2 size-4" />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings class="mr-2 size-4" />
<span>Settings</span>
<Command.Shortcut>⌘S</Command.Shortcut>
</Command.Item>
</Command.Group>
</Command.List>
</Command.Root>
Installation
npx shadcn-svelte@next add command
Install bits-ui:
npm install bits-ui -D
Copy and paste the component source files linked at the top of this page into your project.
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 { onMount } from "svelte";
import * as Command from "$lib/components/ui/command/index.js";
let open = $state(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-muted-foreground text-sm">
Press
<kbd
class="bg-muted text-muted-foreground pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium 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 size-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Face class="mr-2 size-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Rocket class="mr-2 size-4" />
<span>Launch</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<Person class="mr-2 size-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<EnvelopeClosed class="mr-2 size-4" />
<span>Mail</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Gear class="mr-2 size-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";
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 select-none items-center gap-1 rounded border px-1.5 font-mono text-[10px] font-medium 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 size-4" />
<span>Calendar</span>
</Command.Item>
<Command.Item>
<Smile class="mr-2 size-4" />
<span>Search Emoji</span>
</Command.Item>
<Command.Item>
<Calculator class="mr-2 size-4" />
<span>Calculator</span>
</Command.Item>
</Command.Group>
<Command.Separator />
<Command.Group heading="Settings">
<Command.Item>
<User class="mr-2 size-4" />
<span>Profile</span>
<Command.Shortcut>⌘P</Command.Shortcut>
</Command.Item>
<Command.Item>
<CreditCard class="mr-2 size-4" />
<span>Billing</span>
<Command.Shortcut>⌘B</Command.Shortcut>
</Command.Item>
<Command.Item>
<Settings class="mr-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.
<script lang="ts">
import * as Command from "$lib/components/ui/command";
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>
On This Page