# Command Palette

> Overlays in Twentyfirst UI.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/CommandPalette/)

## Example

```tsx
import { CommandPalette } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        position: "relative",
        height: 430,
        borderRadius: "var(--radius-lg)",
        overflow: "hidden",
        background: "var(--canvas)",
      }}
    >
      <CommandPalette
        inline
        onClose={() => {}}
        items={[
          {
            id: 1,
            group: "Pages",
            label: "Invoices",
            hint: "Finance",
            icon: "card",
          },
          {
            id: 2,
            group: "Pages",
            label: "Pipeline",
            hint: "Customers",
            icon: "trend",
          },
          {
            id: 3,
            group: "Actions",
            label: "New invoice",
            icon: "card",
            tint: "butter",
          },
          {
            id: 4,
            group: "Actions",
            label: "Compose mail",
            icon: "edit",
            tint: "sky",
          },
          {
            id: 5,
            group: "Actions",
            label: "New agent",
            icon: "bot",
            tint: "lilac",
          },
          {
            id: 6,
            group: "Records",
            label: "Northwind",
            hint: "Customer · Team",
            icon: "users",
            tint: "sky",
            searchOnly: true,
          },
        ]}
      />
    </div>
  );
}
```

## Props

### CommandPalette

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `PaletteItem[]` | Required |
| `onClose?` | `() => void` |  |
| `placeholder?` | `string` |  |
| `inline?` | `boolean` |  |
| `loading?` | `boolean` | Results are on their way (async search): shows a loading row. |
| `empty?` | `ReactNode` | Shown when nothing matches (default: "Nothing matches …"). |
| `onQueryChange?` | `(query: string) => void` | Called with the query as the user types, for searching on a server. |
| `open?` | `boolean` | Optional: with `open` the component stays mounted while it animates out; without it, render it only while open. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |