Command Palette
A ⌘K command menu with fuzzy filtering, keyboard navigation, and spring enter / exit.
Installation
pnpm dlx shadcn@latest add "https://godui.design/r/command-palette.json"CommandPalette is a controlled, portalled ⌘K menu. It filters as you type, moves the
active highlight with a spring (layoutId), and supports ↑ ↓ to navigate, Enter
to select, and Escape to close. With enableShortcut it toggles on ⌘K / Ctrl+K.
Usage
tsx
"use client";
import { CommandPalette } from "@/components/godui/command-palette";
import { useState } from "react";
const groups = [
{
heading: "Navigation",
items: [
{ id: "home", label: "Go to Home", shortcut: "G H", onSelect: () => navigate("/") },
{ id: "docs", label: "Search Docs", keywords: ["help"] },
],
},
];
export function Example() {
const [open, setOpen] = useState(false);
return <CommandPalette open={open} onOpenChange={setOpen} groups={groups} />;
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state. |
onOpenChange | (open: boolean) => void | — | Called when the palette opens/closes. |
groups | CommandGroup[] | — | Grouped commands to show. |
placeholder | string | "Type a command or search…" | Input placeholder. |
enableShortcut | boolean | true | Toggle with ⌘K / Ctrl+K. |
A CommandItem is { id, label, icon?, shortcut?, keywords?, onSelect? }; a
CommandGroup is { heading?, items }.