Ravox KitOverlays
Command
Command palette: search that filters as you type regardless of accents, groups with headings, synonyms, shortcuts and the empty state. Placed in the page or in a native dialog that opens with ⌘K / Ctrl+K. Arrows cycle, Enter selects, Esc clears and closes.
Settings
Toggles
Examples
In a dialog, with ⌘K
Server-side search
Installation
The command creates components/ui/command.tsx in your project and installs the theme with it. The file is yours: edit it as you like.
npx @ravox-ui/cli add commandProps
| Prop | Type | Default | Description |
|---|---|---|---|
| <Command search onSearchChange> | string / (search) => void | — | The root. Control the search when results come from the server. |
| filter | (text, search) => boolean | — | Replaces the filter. The default requires every typed word to be in the item text, ignoring accents and case. |
| shouldFilter | boolean | true | false: shows all items (you filter on the server). |
| <CommandInput placeholder trailing> | string / ReactNode | — | The search field (combobox). trailing puts something on the right, such as a spinner. |
| <CommandList> | ComponentProps<"div"> | — | The scrolling list (listbox); the active item always stays in view. |
| <CommandGroup title> | ReactNode | — | Group with a heading. Disappears on its own when none of its items pass the filter. |
| <CommandItem value keywords icon shortcut onSelect> | string / string[] / ReactNode / string / (value) => void | — | One result. value (default: the text) and keywords are included in the search; shortcut is only the displayed text (e.g. "G P"). |
| <CommandEmpty> / <CommandLoading> / <CommandSeparator> | — | — | No results, waiting for the server and a line between groups (hidden during search). |
| <CommandDialog open onOpenChange shortcut> | boolean / (open) => void / string | false | shortcut "k" | The palette in a native <dialog>: focus trapped, Esc closes and focus returns. ⌘K or Ctrl+K opens and closes it. |
| closeOnSelect / label | boolean / string | true / "Command palette" | In the dialog: closes on select, and the name read by screen readers. |