---
title: "CommandPalette"
description: "Search and commands in one modal that Ctrl+K (⌘K) opens from anywhere, and the list of keyboard shortcuts that ? opens."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CommandPalette

## Command palette

```tsx
import { ChartBarIcon, GearIcon, MegaphoneIcon, UserIcon } from '@phosphor-icons/react';
import { useState } from 'react';
import { Button, CommandPalette } from '@arbol-ai/ui';

const PaletteExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        aria-keyshortcuts="Control+K Meta+K"
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Search
      </Button>
      <CommandPalette
        groups={[
          {
            id: 'pages',
            title: 'Pages',
            items: [
              { id: 'contacts', label: 'Contacts', icon: <UserIcon />, href: '#/command-palette' },
              { id: 'campaigns', label: 'Campaigns', icon: <MegaphoneIcon />, href: '#/command-palette' },
              { id: 'reports', label: 'Reports', icon: <ChartBarIcon />, href: '#/command-palette' },
              { id: 'settings', label: 'Settings', icon: <GearIcon />, href: '#/command-palette' },
            ],
          },
        ]}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
        recent={[{ id: 'ana', label: 'Ana Torres', description: '+57 300 555 0101', icon: <UserIcon /> }]}
      />
    </>
  );
};

<PaletteExample />
```

## Keyboard shortcuts

```tsx
import { useState } from 'react';
import { Button, ShortcutsDialog } from '@arbol-ai/ui';

const ShortcutsExample = () => {
  const [isOpen, setIsOpen] = useState(false);
  return (
    <>
      <Button
        aria-keyshortcuts="?"
        onPress={() => {
          setIsOpen(true);
        }}
        variant="outline"
      >
        Keyboard shortcuts
      </Button>
      <ShortcutsDialog
        groups={[
          {
            title: 'Anywhere',
            shortcuts: [
              { keys: ['Ctrl', 'K'], label: 'Search contacts, campaigns and pages' },
              { keys: ['?'], label: 'Show these shortcuts' },
              { keys: ['Esc'], label: 'Close a panel or a dialog' },
            ],
          },
          {
            title: 'In the calendar',
            shortcuts: [
              { keys: ['←', '→'], label: 'Previous and next day' },
              { keys: ['T'], label: 'Go to today' },
            ],
          },
        ]}
        isOpen={isOpen}
        onOpenChange={setIsOpen}
      />
    </>
  );
};

<ShortcutsExample />
```

## Source

The examples above are [`src/components/command-palette/command-palette.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/command-palette/command-palette.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/overlays/command-palette/index.mdx