Documentation Index
Fetch the complete documentation index at: https://mintlify.com/huntabyte/shadcn-svelte/llms.txt
Use this file to discover all available pages before exploring further.
Installation
npx shadcn-svelte@next add command
Copy component code
Copy and paste the component source code into your project.
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
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>
Combobox
You can use the <Command /> component as a combobox. See the Combobox page for more information.
Changelog
2024-10-30 Classes for icons
- Added
gap-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 to the <Command.Item> component to automatically style the icons inside.
Links