Command

Command is a fast, composable command menu (the kind behind a Cmd+K palette) for searching and running actions.

Installation

Nothing to add. This component ships as source in your download, so it is already in your project.

Filesrc/vui/command.tsx

Import from@viliha/vui-react/command

The exported names are at the top of that file. The import path is an alias the download's tsconfig.json points at src/vui/, so you can move that folder and change one line rather than every file that imports from it.

Usage

Built on `cmdk`. Type to filter items across groups.

command-demo.tsx

import {
  Command, CommandInput, CommandList, CommandEmpty,
  CommandGroup, CommandItem, CommandSeparator, CommandShortcut,
} from "@viliha/vui-react/command";

export function Example() {
  return (
    <Command className="rounded-lg border">
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  );
}

Command in a dialog

For a modal ⌘K command menu, use VUI's command-palette (it wraps this in an overlay). The command primitive here is the inline menu.

Command props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandEmpty props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive.Empty primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandGroup props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive.Group primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandInput props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive.Input primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandItem props

It takes no props of its own. Everything you pass reaches the underlying <span> element, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandList props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive.List primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandSeparator props

It takes no props of its own. Everything you pass reaches the underlying CommandPrimitive.Separator primitive, so every attribute it accepts works here unchanged and nothing is invented on top.

CommandShortcut props

It takes no props of its own. Everything you pass reaches the underlying <span> element, so every attribute it accepts works here unchanged and nothing is invented on top.