Command

The Command component provides a powerful command palette interface for quickly searching and executing actions. It’s perfect for keyboard-first experiences, app-wide search, and quick navigation.

Usage

<script>
  import { 
    Command,
    CommandInput,
    CommandList,
    CommandEmpty, 
    CommandGroup,
    CommandItem
  } from "$lib/components/ui/command";
</script>

<Command>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem>Calendar</CommandItem>
      <CommandItem>Search</CommandItem>
      <CommandItem>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

Examples

Basic Command Palette

A simple command palette with suggestions.

With Multiple Groups

A command palette with multiple categorized groups.

With Dialog

A command palette in a dialog that can be triggered from anywhere.

Click to open the command dialog (dialog not shown in preview).

With Link Items

A command palette with link items for navigation.

Filtering Demo

A command palette that filters items based on input.

API Reference

Command Components

Component	Description
`Command`	The root component that manages the command palette state.
`CommandDialog`	A dialog wrapper for the command palette.
`CommandInput`	The search input for filtering commands.
`CommandList`	The container for command groups and items.
`CommandEmpty`	The component displayed when no results are found.
`CommandGroup`	A group of related command items with a heading.
`CommandItem`	A selectable command item.
`CommandLinkItem`	A command item that acts as a link.
`CommandSeparator`	A visual separator between command groups.
`CommandShortcut`	Displays keyboard shortcut hints.
`CommandLoading`	Displays a loading state when searching.

Command Properties

Property	Type	Default	Description
`value`	`string`	`""`	The value of the command input.
`onValueChange`	`function`	`undefined`	Callback fired when the value changes.
`filter`	`function`	`defaultFilter`	Custom filter function.
`loop`	`boolean`	`false`	Whether to loop through items when navigating.
`class`	`string`	`undefined`	Custom CSS classes.

CommandDialog Properties

Property	Type	Default	Description
`open`	`boolean`	`false`	Whether the dialog is open.
`onOpenChange`	`function`	`undefined`	Callback fired when the open state changes.
`value`	`string`	`""`	The value of the command input.
`onValueChange`	`function`	`undefined`	Callback fired when the value changes.
`portalProps`	`object`	`undefined`	Props for the portal component.

CommandInput Properties

Property	Type	Default	Description
`value`	`string`	`""`	The value of the input.
`onValueChange`	`function`	`undefined`	Callback fired when the value changes.
`placeholder`	`string`	`undefined`	Placeholder text to display.
`disabled`	`boolean`	`false`	Whether the input is disabled.
`class`	`string`	`undefined`	Custom CSS classes.

CommandGroup Properties

Property	Type	Default	Description
`heading`	`string`	`undefined`	The heading text for the group.
`value`	`string`	`undefined`	The value for the group for search filtering.
`class`	`string`	`undefined`	Custom CSS classes.

CommandItem Properties

Property	Type	Default	Description
`value`	`string`	`undefined`	The value of the item for search filtering.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`onSelect`	`function`	`undefined`	Callback fired when the item is selected.
`class`	`string`	`undefined`	Custom CSS classes.

CommandLinkItem Properties

Property	Type	Default	Description
`href`	`string`	Required	The URL to navigate to.
`value`	`string`	`undefined`	The value of the item for search filtering.
`disabled`	`boolean`	`false`	Whether the item is disabled.
`onSelect`	`function`	`undefined`	Callback fired when the item is selected.
`class`	`string`	`undefined`	Custom CSS classes.

Implementation

The Command component is built on top of bits-ui primitives, providing a command palette interface with keyboard navigation and search functionality. Here’s a look at how some of the components are implemented:

<!-- Command root styling -->
<CommandPrimitive.Root
  class={cn(
    "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md"
  )}
/>

<!-- CommandInput styling -->
<div class="flex items-center border-b px-3" data-command-input-wrapper="">
  <Search class="mr-2 size-4 shrink-0 opacity-50" />
  <CommandPrimitive.Input
    class={cn(
      "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-base outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm"
    )}
  />
</div>

<!-- CommandItem styling -->
<CommandPrimitive.Item
  class={cn(
    "aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"
  )}
/>

The command palette is built with accessibility in mind, supporting keyboard navigation with arrow keys, selection with Enter, and proper focus management. It provides a way to quickly search through and execute commands, making it perfect for keyboard-first interfaces.