@usevyre/react@usevyre/vue

Command

A fast, filterable command palette. Type to search — items are filtered in real-time by their visible label or optional keywords. Use it inline or as a full-screen dialog triggered by ⌘K.

Inline

Compose CommandInput, CommandList, CommandGroup, andCommandItem inside Command. Type in the search box to filter items live.

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator,
} from "@usevyre/react";

<Command>
  <CommandInput placeholder="Search commands..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Navigation">
      <CommandItem icon={<FileIcon />} shortcut="⌘N" onSelect={() => openFile()}>
        New file
      </CommandItem>
      <CommandItem icon={<SearchIcon />} shortcut="⌘F" onSelect={() => find()}>
        Find in files
      </CommandItem>
    </CommandGroup>
    <CommandSeparator />
    <CommandGroup heading="Settings">
      <CommandItem icon={<SettingsIcon />} shortcut="⌘," onSelect={() => openPrefs()}>
        Preferences
      </CommandItem>
      <CommandItem disabled>Admin panel</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

<script setup>
import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator,
} from "@usevyre/vue";
</script>
<template>
  <Command>
    <CommandInput placeholder="Search commands..." />
    <CommandList>
      <CommandEmpty>No results found.</CommandEmpty>
      <CommandGroup heading="Navigation">
        <CommandItem shortcut="⌘N" @select="openFile">
          <template #icon><FileIcon /></template>
          New file
        </CommandItem>
        <CommandItem shortcut="⌘F" @select="find">
          <template #icon><SearchIcon /></template>
          Find in files
        </CommandItem>
      </CommandGroup>
      <CommandSeparator />
      <CommandGroup heading="Settings">
        <CommandItem shortcut="⌘," @select="openPrefs">
          <template #icon><SettingsIcon /></template>
          Preferences
        </CommandItem>
        <CommandItem :disabled="true">Admin panel</CommandItem>
      </CommandGroup>
    </CommandList>
  </Command>
</template>

Dialog — command palette

Wrap with CommandDialog to render as a full-screen modal with backdrop. Press ⌘K or Ctrl+K to open, Esc to close. Focus is moved to the search input automatically on open.

import { CommandDialog, CommandInput, CommandList, ... } from "@usevyre/react";

const [open, setOpen] = useState(false);

// Bind ⌘K / Ctrl+K globally
useEffect(() => {
  const handler = (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
      e.preventDefault();
      setOpen((o) => !o);
    }
  };
  window.addEventListener("keydown", handler);
  return () => window.removeEventListener("keydown", handler);
}, []);

<Button onClick={() => setOpen(true)}>Open palette</Button>

<CommandDialog open={open} onOpenChange={setOpen}>
  <CommandInput placeholder="Type a command or search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Navigation">
      <CommandItem icon={<FileIcon />} shortcut="⌘N" onSelect={() => { openFile(); setOpen(false); }}>
        New file
      </CommandItem>
    </CommandGroup>
  </CommandList>
</CommandDialog>

<script setup>
import { CommandDialog, Command, CommandInput, CommandList, ... } from "@usevyre/vue";

const open = ref(false);

onMounted(() => {
  window.addEventListener("keydown", (e) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
      e.preventDefault();
      open.value = !open.value;
    }
  });
});
</script>
<template>
  <CommandDialog v-model:open="open">
    <Command>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Navigation">
          <CommandItem @select="() => { openFile(); open = false; }">New file</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </CommandDialog>
</template>

Props — Command

Props

Prop	Type	Default	Description
`value / v-model`	`string`	`—`	Controlled search value. Omit to use internal state.
`onValueChange`	`(v: string) => void`	`—`	(React) Called when the search input changes.
`class / className`	`string`	`—`	Additional CSS class on the root element.

Props — CommandDialog

Props

Prop	Type	Default	Description
`open`	`boolean`	`—`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`—`	(React) Called when the dialog should close (Escape or backdrop click).
`v-model:open`	`boolean`	`—`	(Vue) Two-way binding for open state.
`+ Command props`	`—`	`—`	All Command props are forwarded.

Props — CommandItem

Props

Prop	Type	Default	Description
`onSelect / @select`	`() => void`	`—`	Called when the item is clicked or activated via keyboard.
`disabled`	`boolean`	`false`	Makes the item non-interactive and visually dimmed.
`keywords`	`string[]`	`—`	Extra search terms used to match this item beyond its visible label.
`icon`	`ReactNode / #icon slot`	`—`	Leading icon displayed before the label.
`shortcut`	`string`	`—`	Keyboard shortcut hint rendered on the right (e.g. ⌘K). Display only — does not bind the shortcut.
`class / className`	`string`	`—`	Additional CSS class.

Props — CommandGroup

Props

Prop	Type	Default	Description
`heading`	`string`	`—`	Section label rendered above the group items.
`class / className`	`string`	`—`	Additional CSS class.

AI Context

Common AI mistakes

Using Input type="search" for search UI→ Use Command + CommandInput + CommandList + CommandItem

Quick examples

Basic command palette

<Command>
  <CommandInput placeholder="Search..." />
  <CommandList>
    <CommandEmpty>No results found.</CommandEmpty>
    <CommandGroup heading="Suggestions">
      <CommandItem onSelect={() => handleSelect('dashboard')}>Dashboard</CommandItem>
      <CommandItem onSelect={() => handleSelect('settings')}>Settings</CommandItem>
    </CommandGroup>
  </CommandList>
</Command>

← Checkbox Dropdown Menu →