@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, and CommandItem 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>

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>

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.
← Checkbox Dropdown Menu →