Docs
Command
Command
Fast, composable, unstyled command menu for Svelte.
Loading...
<script lang="ts">
import {
Calendar,
EnvelopeClosed,
Face,
Gear,
Person,
Rocket
} from "radix-icons-svelte";
import * as Command from "$lib/components/ui/command";
</script>
<Command.Root class="rounded-lg border shadow-md max-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>
<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,
Calendar,
CreditCard,
Settings,
Smile,
User
} from "lucide-svelte";
import * as Command from "$lib/components/ui/command";
</script>
<Command.Root class="rounded-lg border shadow-md max-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>
<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
Loading...
<script lang="ts">
import {
Calendar,
EnvelopeClosed,
Face,
Gear,
Person,
Rocket
} from "radix-icons-svelte";
import * as Command from "$lib/components/ui/command";
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,
Calendar,
CreditCard,
Settings,
Smile,
User
} from "lucide-svelte";
import * as Command from "$lib/components/ui/command";
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>
On This Page