# CommandPalette

Search commands and execute them without taking your hands off the keyboard.

- Family: Navigation, imported from `mizu-ui` or `mizu-ui/navigation`
- Docs: https://mizu.user64bit.world/components/command-palette
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/navigation/CommandPalette.tsx

## Usage

```tsx
"use client";

import { useState } from "react";
import { CommandPalette, Button } from "mizu-ui";

export function Example() {
  const [open, setOpen] = useState(false),
    [result, setResult] = useState("Choose a command.");
  return (
    <div>
      <Button onClick={() => setOpen(true)}>Open commands</Button>
      <p role="status" className="mizu-field-hint">
        {result}
      </p>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        commands={[
          {
            id: "new",
            label: "Create a draft",
            description: "Start a new local record",
            onSelect: () => setResult("Draft created."),
          },
          {
            id: "review",
            label: "Review the release",
            description: "Open the review queue",
            onSelect: () => setResult("Review queue opened."),
          },
          {
            id: "save",
            label: "Save changes",
            shortcut: "⌘ S",
            onSelect: () => setResult("Changes saved."),
          },
        ]}
      />
    </div>
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/command-palette 0xuser64bit/mizu/button
```

## Props

- `open / onOpenChange`: `boolean / function`. Controlled modal visibility.
- `commands`: `Command[]`. Stable id, label, description, optional shortcut/disabled and onSelect. Optional keywords are matched but not shown, for other names people search by.
- `label / placeholder`: `string`. Accessible name and search prompt.

## Accessibility

Native modal contains focus and restores its trigger. Combobox/listbox exposes active commands. Up/down wraps, Enter executes; Escape closes.

## Motion

Modal entrance obeys reduced motion.