Command Palette
NewPro
A Cmd/Ctrl+K menu with fuzzy search, groups, arrow keys and a highlight that slides between results.
Customize
#ff784f
Group headings
260px
Cover the page
When to use it
- Jumping to any page or setting in a dashboard without touching the mouse
- Running actions such as invite, export or archive in an admin tool
- One search box for docs, projects and people in a SaaS app
Good to know
- Plan
- Pro
- Dependencies
- motion
- Rendering
- DOM and CSS
- Reduced motion
- Respected
- Lines of code
- 602
Installation
Command Palette is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy command-palette.tsx into components/ui and run npm install motion.
Usage
import { CommandPalette } from "@/components/ui/command-palette";
<CommandPalette
items={[
{ id: "home", label: "Go to dashboard", group: "Navigate", shortcut: "G D", onSelect: () => router.push("/") },
{ id: "invite", label: "Invite teammate", group: "Actions", keywords: ["add", "member"], onSelect: openInvite },
]}
/>Props
16 properties| Property | Type | Default | Description |
|---|---|---|---|
| items | CommandItem[] | — | Commands: { id, label, group?, hint?, icon?, shortcut?, keywords?, disabled?, onSelect? }. |
| open | boolean | — | Open state, for controlled use. |
| defaultOpen | boolean | false | Open state when uncontrolled. |
| onOpenChange | (open: boolean) => void | — | Called when the palette opens or closes. |
| onSelect | (item: CommandItem) => void | — | Called with any chosen command, after its own onSelect. |
| hotkey | string | false | "k" | Letter pressed with Cmd or Ctrl to toggle the palette. False turns the shortcut off. |
| placeholder | string | "Type a command or search…" | Text in the empty search field. |
| emptyMessage | (query: string) => ReactNode | — | Shown when nothing matches. |
| color | string | "#ff784f" | Color of the highlight and matched letters. |
| showGroups | boolean | true | Show group headings. Off gives one flat list. |
| maxHeight | number | 320 | Tallest the result list gets before it scrolls, in pixels. |
| closeOnSelect | boolean | true | Close after a command is chosen. |
| autoFocus | boolean | true | Move focus into the search field when opening. |
| container | HTMLElement | null | — | Portal target. Defaults to document.body and covers the viewport; an element covers only that element. |
| label | string | "Command menu" | Accessible name of the dialog. |
| className | string | — | Extra classes for the panel. |
Dependencies: motion