> ## 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.

# Slash Commands

> Add a command menu for inserting content blocks.

## Quick start

Add `SlashCommand` with the default command set:

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
import { StarterKit } from '@react-email/editor/extensions';
import { defaultSlashCommands, SlashCommand } from '@react-email/editor/ui';
import { EditorProvider } from '@tiptap/react';
import '@react-email/editor/themes/default.css';

const extensions = [StarterKit];

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <SlashCommand items={defaultSlashCommands} />
    </EditorProvider>
  );
}
```

Type `/` in the editor to open the command menu. Use arrow keys to navigate and Enter to select.

> [!TIP]
>
> Even though you can [add custom commands](#adding-custom-commands) and style
> them that way, the default can also be styled using \
> &#x20;[CSS variables and `data-re-*` selectors](https://react.email/docs/editor/features/styling#slash-command).

## Default commands

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

| Command | Category | Description |
| - | - | - |
| `TEXT` | Text | Plain text block |
| `H1` | Text | Large heading |
| `H2` | Text | Medium heading |
| `H3` | Text | Small heading |
| `BULLET_LIST` | Text | Unordered list |
| `NUMBERED_LIST` | Text | Ordered list |
| `QUOTE` | Text | Block quote |
| `CODE` | Text | Code snippet |
| `BUTTON` | Layout | Clickable button |
| `DIVIDER` | Layout | Horizontal separator |
| `SECTION` | Layout | Content section |
| `TWO_COLUMNS` | Layout | Two column layout |
| `THREE_COLUMNS` | Layout | Three column layout |
| `FOUR_COLUMNS` | Layout | Four column layout |

Each command is also exported individually, so you can cherry-pick:

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

<SlashCommand items={[TEXT, H1, H2, BUTTON]} />
```

## Adding custom commands

Create a `SlashCommandItem` and include it in the items array:

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

const GREETING: SlashCommandItem = {
  title: 'Greeting',
  description: 'Insert a greeting block',
  icon: <Star size={20} />,
  category: 'Custom',
  searchTerms: ['hello', 'greeting', 'welcome'],
  command: ({ editor, range }) => {
    editor
      .chain()
      .focus()
      .deleteRange(range)
      .insertContent({
        type: 'paragraph',
        content: [{ type: 'text', text: 'Hello! Welcome to our newsletter.' }],
      })
      .run();
  },
};

export function MyEditor() {
  return (
    <EditorProvider extensions={extensions} content={content}>
      <SlashCommand
        items={[...defaultSlashCommands, GREETING]}
      />
    </EditorProvider>
  );
}
```

The `SlashCommandItem` interface:

**title** `string` *required*

Display name shown in the command list.

**description** `string` *required*

Help text shown below the title.

**icon** `ReactNode` *required*

Icon displayed next to the command.

**category** `string` *required*

Category for grouping commands in the list.

**searchTerms** `string[]`

Additional terms for fuzzy search matching.

**command** `(props: \{ editor, range \}) =\> void` *required*

Function called when the command is selected. Receives the editor instance and the range to replace.

## Using individual commands

You can cherry-pick from the default commands to show only specific options:

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

<SlashCommand items={[BUTTON]} />
```

This is useful when you want a minimal command palette. For example, only allowing button insertion.

## Controlling visibility

**char** `string` (default: /)

Character that triggers the command menu.

**allow** `(props: \{ editor \}) =\> boolean`

Function to control when the command menu can appear. Return `false` to prevent it.

```tsx theme={"theme":{"light":"github-light","dark":"vesper"}}
<SlashCommand
  items={defaultSlashCommands}
  char="/"
  allow={({ editor }) => !editor.isActive('codeBlock')}
/>
```

## Examples

See slash commands in action with a runnable example:

> **[Slash Commands](https://react.email/editor/examples/slash-commands)**
>
> Default commands plus a custom Greeting command.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.