Components/CommandPalette

CommandPalette

A Cmd+K command palette with fuzzy search, grouped results, keyboard navigation (↑↓↵), and shortcut display. The useCommandPalette hook auto-binds Cmd/Ctrl+K.

import { CommandPalette, useCommandPalette } from "@animui/ui"

Live demo

Press Ctrl+K or click the button to open.

Grouped items

Assign a group string to each command item — items with the same group are shown under a shared heading.

command-items.ts

const commands = [
  { id: "new-file",   label: "New file",      group: "Create", onSelect: () => {} },
  { id: "new-folder", label: "New folder",    group: "Create", onSelect: () => {} },
  { id: "profile",    label: "Go to profile", group: "Navigate", onSelect: () => {} },
  { id: "settings",  label: "Settings",      group: "Navigate", onSelect: () => {} },
  { id: "logout",    label: "Sign out",      group: "Account", onSelect: () => {} },
];

CommandPalette props

Prop	Type	Default	Description
`open`	`boolean`	—	Whether the palette is shown.
`onClose`	`() => void`	—	Called when the user dismisses the palette (Escape or backdrop click).
`items`	`CommandItem[]`	—	Array of command items to display and search.
`placeholder`	`string`	`"Search commands…"`	Input placeholder text.
`className`	`string`	—	Additional classes on the panel.

useCommandPalette hook

Prop	Type	Default	Description
`open`	`boolean`	`false`	Whether the palette is currently open.
`setOpen`	`(open: boolean) => void`	—	Toggle open state.
`close`	`() => void`	—	Close the palette.

CommandItem shape

Prop	Type	Default	Description
`id`	`string`	—	Unique identifier.
`label`	`string`	—	Primary display text.
`description`	`string`	—	Secondary description shown below the label.
`icon`	`ReactNode`	—	Icon rendered before the label.
`group`	`string`	—	Group heading to organize items.
`shortcut`	`string[]`	—	Keyboard shortcut keys shown as badges.
`onSelect`	`() => void`	—	Action to run when selected.