CommandPalette

⌘K: every page and action, grouped; nested pages; async groups with a quiet progress line.

function Basic() {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Button leadingIcon={icons.search} onClick={() => setOpen(true)} size="lg">
        Search
      </Button>
      <CommandPalette open={open} onOpenChange={setOpen} groups={groups} hotkey={false} />
    </>
  );
}

import { CommandPalette } from "@logicplanes/kaeso-ui";

Props

defaultQuery
string
Start with this query (documentation).
emptyText
ReactNode
Defaults to "No results" in the provider's language.
groups
CommandGroup[]
The commands, in groups with a heading each.
hotkey
boolean
Open with ⌘K / Ctrl+K anywhere (default true).
inline
boolean
Render without a portal, for documentation and state matrices.
keyHints
boolean
A footer with the keys (↑ ↓ to navigate, ↵ to open, esc to close). Off by default: key hints only where asked for.
onOpenChange
((open: boolean) => void)
Called when it opens or closes.
onQueryChange
((query: string) => void)
Called as the query changes, for async groups.
open
boolean
Whether it is open, when you control it.
placeholder
string
Defaults to "Search or run a command" in the provider's language.