Command

Fast, composable command palette built on cmdk with search, groups, and shortcuts.

<Command className="rounded-lg border md:min-w-[450px]">  <CommandInput placeholder="Type a command or search..." />  <CommandList>    <CommandEmpty>No results found.</CommandEmpty>    <CommandGroup heading="Suggestions">      <CommandItem>        <CalendarIcon />        <span>Calendar</span>      </CommandItem>      <CommandItem>        <Smiley />        <span>Search Emoji</span>      </CommandItem>      <CommandItem>        <Calculator />        <span>Calculator</span>      </CommandItem>    </CommandGroup>    <CommandSeparator />    <CommandGroup heading="Settings">      <CommandItem>        <User />        <span>Profile</span>        <CommandShortcut>⌘P</CommandShortcut>      </CommandItem>      <CommandItem>        <CreditCard />        <span>Billing</span>        <CommandShortcut>⌘B</CommandShortcut>      </CommandItem>      <CommandItem>        <Gear />        <span>Settings</span>        <CommandShortcut>⌘S</CommandShortcut>      </CommandItem>    </CommandGroup>  </CommandList></Command>

Usage

import {
  Command,
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  CommandSeparator,
  CommandShortcut,
} from "@reva/ui";

CommandShortcut is a styled <span> that renders trailing keystroke hints (⌘K, ⌘P, …). A dedicated Kbd primitive ships in Wave 6; until then, prefer CommandShortcut for consistency with the palette chrome.

Composition

Use the following composition to build a Command:

Command
├── CommandInput
└── CommandList
    ├── CommandEmpty
    ├── CommandGroup (heading="Suggestions")
    │   ├── CommandItem
    │   ├── CommandItem
    │   └── CommandItem
    ├── CommandSeparator
    └── CommandGroup (heading="Settings")
        ├── CommandItem
        │   └── CommandShortcut
        ├── CommandItem
        │   └── CommandShortcut
        └── CommandItem
            └── CommandShortcut

Examples

Command dialog

Wrap the palette in CommandDialog for a centred modal (⌘K pattern). Drive open from a useEffect listener so users can summon the palette from anywhere.

import { useEffect, useState } from "react";
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@reva/ui";

export function CommandPalette() {
  const [open, setOpen] = useState(false);

  useEffect(() => {
    const down = (event: KeyboardEvent) => {
      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
        event.preventDefault();
        setOpen((value) => !value);
      }
    };
    document.addEventListener("keydown", down);
    return () => document.removeEventListener("keydown", down);
  }, []);

  return (
    <CommandDialog open={open} onOpenChange={setOpen}>
      <CommandInput placeholder="Type a command or search..." />
      <CommandList>
        <CommandEmpty>No results found.</CommandEmpty>
        <CommandGroup heading="Suggestions">
          <CommandItem>Calendar</CommandItem>
          <CommandItem>Search Emoji</CommandItem>
          <CommandItem>Calculator</CommandItem>
        </CommandGroup>
      </CommandList>
    </CommandDialog>
  );
}

Props

Command (root)

Wraps cmdk's Command.Root. Common props:

Prop	Type	Default	Description
`value`	`string`	—	Controlled active item value.
`onValueChange`	`(value: string) => void`	—	Controlled active item handler.
`filter`	`(value: string, search: string) => number`	—	Custom fuzzy filter; return `0` to hide an item.
`shouldFilter`	`boolean`	`true`	Disable to drive results from your own data layer.
`loop`	`boolean`	`false`	Wrap arrow-key navigation between first and last items.

CommandInput

Prop	Type	Default	Description
`placeholder`	`string`	—	Placeholder text for the search input.
`value`	`string`	—	Controlled search query.
`onValueChange`	`(value: string) => void`	—	Controlled search handler.

CommandItem

Prop	Type	Default	Description
`value`	`string`	—	Override the matchable string (defaults to the rendered text).
`disabled`	`boolean`	`false`	Prevents selection and excludes the item from filtering.
`onSelect`	`(value: string) => void`	—	Fires when the item is activated.

CommandDialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	—	Controlled open handler.
`title`	`string`	`"Command Palette"`	Screen-reader title for the dialog.
`description`	`string`	`"Search for a command to run..."`	Screen-reader description.
`showCloseButton`	`boolean`	`false`	Render the dialog's built-in close button.

Command

On this page