> ## 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 <br /> [CSS variables and `data-re-*` selectors](/editor/features/styling#slash-command).
</Tip>

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

<ResponseField name="title" type="string" required>
  Display name shown in the command list.
</ResponseField>

<ResponseField name="description" type="string" required>
  Help text shown below the title.
</ResponseField>

<ResponseField name="icon" type="ReactNode" required>
  Icon displayed next to the command.
</ResponseField>

<ResponseField name="category" type="string" required>
  Category for grouping commands in the list.
</ResponseField>

<ResponseField name="searchTerms" type="string[]">
  Additional terms for fuzzy search matching.
</ResponseField>

<ResponseField name="command" type="(props: { editor, range }) => void" required>
  Function called when the command is selected. Receives the editor instance and the range to replace.
</ResponseField>

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

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

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

```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:

<CardGroup cols={2}>
  <Card title="Slash Commands" icon="code" href="https://react.email/editor/examples/slash-commands">
    Default commands plus a custom Greeting command.
  </Card>
</CardGroup>