CommandPalette
Overlays

CommandPalette

⌘K launcher with fuzzy filtering over grouped commands and keyboard navigation.

Preview

CommandPalette

Props

CommandPaletteProps props
PropTypeDefaultDescription
openboolean—Controlled open state.
onClose() => void—Called on Escape or backdrop click.
groupsCommandGroup[]—Grouped commands to filter and display.
onRun(command: Command) => void—Called when a command is selected.
placeholderstring"Type a command or search…"Search input placeholder.
renderCommand(command: Command, state: { active: boolean }) => ReactNode—Replaces a row's contents. The row button, its padding and its active background stay Onset's, so a custom row still highlights and scrolls into view.

Types

Command

Command shape props
PropTypeDefaultDescription
idstring—Unique identifier.
labelstring—Display label.
keywordsstring—Extra strings to match against (aliases, record IDs).
iconReactNode—Leading icon.
shortcutReactNode—Keyboard shortcut hint on the right.
hintReactNode—Dim right-side annotation (e.g. record type).

CommandGroup

CommandGroup shape props
PropTypeDefaultDescription
labelReactNode—Group heading.
commandsCommand[]—Commands in this group.

Examples

Basic usage with useCommandK

ImportTSX
import { CommandPalette, useCommandK, Button } from "@solarius/onset";
import { IconHome, IconSettings, IconUser } from "@tabler/icons-react";
import { useState } from "react";

function Example() {
  const [open, setOpen] = useState(false);
  useCommandK(() => setOpen(true));

  const groups = [
    {
      label: "Navigation",
      commands: [
        {
          id: "home",
          label: "Home",
          icon: <IconHome size={14} />,
          hint: "Dashboard",
        },
        {
          id: "settings",
          label: "Settings",
          icon: <IconSettings size={14} />,
          shortcut: "⌘,",
        },
      ],
    },
    {
      label: "People",
      commands: [
        {
          id: "profile",
          label: "View profile",
          icon: <IconUser size={14} />,
          keywords: "account",
        },
      ],
    },
  ];

  return (
    <>
      <Button onClick={() => setOpen(true)}>⌘K</Button>
      <CommandPalette
        open={open}
        onClose={() => setOpen(false)}
        groups={groups}
        onRun={(cmd) => {
          console.log("Run:", cmd.id);
          setOpen(false);
        }}
      />
    </>
  );
}

useCommandK hook

useCommandKTSX
import { useCommandK } from "@solarius/onset";

function App() {
  const [open, setOpen] = useState(false);
  useCommandK(() => setOpen(true));

  return (/* ... */);
}