> ## Documentation Index
> Fetch the complete documentation index at: https://react.email/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# SlashCommand

> Command menu triggered by typing a character.

Command menu triggered by typing a character (default: `/`).

## SlashCommand

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';

<SlashCommand items={defaultSlashCommands} />
```

<ResponseField name="items" type="SlashCommandItem[]" default="defaultSlashCommands">
  Array of commands to display. Falls back to `defaultSlashCommands` when not provided.
</ResponseField>

<ResponseField name="filterItems" type="(items, query, editor) => SlashCommandItem[]">
  Custom filter function. By default, uses fuzzy matching on title, description, and search terms.
</ResponseField>

<ResponseField name="char" type="string" default="/">
  Character that triggers the command menu.
</ResponseField>

<ResponseField name="allow" type="(props: { editor }) => boolean">
  Controls when the menu can appear. Return `false` to prevent it.
</ResponseField>

<ResponseField name="children" type="(props: SlashCommandRenderProps) => ReactNode">
  Custom render function for the command list. Receives `items`, `query`, `selectedIndex`, and `onSelect`.
</ResponseField>

### Custom rendering

Use the `children` render function to fully customize how the command list looks.
The render function receives the filtered items, current query, selected index,
and a callback to select an item:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';

<SlashCommand items={defaultSlashCommands}>
  {({ items, query, selectedIndex, onSelect }) => (
    <div className="my-command-list">
      {items.map((item, index) => (
        <button
          key={item.title}
          onClick={() => onSelect(index)}
          data-selected={index === selectedIndex}
          className="my-command-item"
        >
          {item.icon}
          <div>
            <span>{item.title}</span>
            <span>{item.description}</span>
          </div>
        </button>
      ))}
      {items.length === 0 && (
        <div className="my-command-empty">
          No results for "{query}"
        </div>
      )}
    </div>
  )}
</SlashCommand>
```

### Custom commands

Pass your own items to add domain-specific commands alongside (or instead of) the defaults:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';
import { ImageIcon } from 'lucide-react';

const customCommands = [
  ...defaultSlashCommands,
  {
    title: 'Image',
    description: 'Insert an image',
    searchTerms: ['photo', 'picture', 'img'],
    icon: <ImageIcon size={18} />,
    category: 'Media',
    command: ({ editor, range }) => {
      editor.chain().focus().deleteRange(range).setImage({ src: '' }).run();
    },
  },
];

<SlashCommand items={customCommands} />
```

***

## SlashCommandItem

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
interface SlashCommandItem {
  title: string;
  description: string;
  searchTerms?: string[];
  icon: ReactNode;
  category: string;
  command: (props: { editor: Editor; range: Range }) => void;
}
```

***

## SlashCommandRenderProps

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
interface SlashCommandRenderProps {
  items: SlashCommandItem[];
  query: string;
  selectedIndex: number;
  onSelect: (index: number) => void;
}
```

***

## Default commands

The `defaultSlashCommands` export includes these built-in commands:

| Command       | Category | Description          |
| ------------- | -------- | -------------------- |
| Text          | Basic    | Plain text paragraph |
| Heading 1     | Headings | Level 1 heading      |
| Heading 2     | Headings | Level 2 heading      |
| Heading 3     | Headings | Level 3 heading      |
| Numbered List | Lists    | Ordered list         |
| Bullet List   | Lists    | Unordered list       |
| Quote         | Basic    | Block quote          |
| Section       | Layout   | Content section      |
| 2 Columns     | Layout   | Two-column layout    |
| 3 Columns     | Layout   | Three-column layout  |
| 4 Columns     | Layout   | Four-column layout   |
| Divider       | Basic    | Horizontal rule      |
| Code          | Basic    | Code block           |
| Button        | Basic    | Email button         |

***

## CSS import

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import '@react-email/editor/styles/slash-command.css';
```