resend__react-email/apps/docs/editor/api-reference/ui/slash-command.mdx

---
title: "SlashCommand"
sidebarTitle: "SlashCommand"
description: "Command menu triggered by typing a character."
icon: "terminal"
---

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

## SlashCommand

```tsx
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
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
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
interface SlashCommandItem {
  title: string;
  description: string;
  searchTerms?: string[];
  icon: ReactNode;
  category: string;
  command: (props: { editor: Editor; range: Range }) => void;
}
```

---

## SlashCommandRenderProps

```tsx
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
import '@react-email/editor/styles/slash-command.css';
```