Vui Starter
npm

Command

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

Installation

pnpm add @viliha/vui-ui

Then import from @viliha/vui-ui/command.

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-ui/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.