Editor

Slash menu

The “/” command menu: insert or convert blocks. Shown here statically; inside the Editor it opens under the caret when you type `/`.

Usage

  • Editor opens SlashMenu when people type /; render it yourself only when building a custom editor.
  • Use query to filter items as people type after the slash.
  • Don’t use the slash menu as a general command palette; use CommandPalette instead.

Installation

Install the package (React 19):

terminal
npm install @krackedui/motion

Import the styles once, in your app entry or root layout:

/src/main.tsx
import '@krackedui/motion/styles.css';

Use it anywhere inside your app's <Theme> (see Installation):

/src/SlashmenuExample.tsx
import { SlashMenu } from '@krackedui/motion';

export function SlashMenuExample() {
  return (
    <SlashMenu activeIndex={0} />
  );
}

Examples

Filtered and keyboard driven

The menu is presentational: you own query and activeIndex. slashItems(query) returns the flattened filtered list for ↑ ↓ / Enter handling.

Type to filter, ↑ ↓ to move, Enter to pick

No results

API Reference

SlashMenu

Based on <div> and supports its props (except onSelect). Adds:

PropTypeDefault
query
string
""
activeIndex
number
0
onActiveIndexChange
(i: number) => void
onSelect
(item: SlashItem) => void
onClose
() => void
groups
SlashGroup[]
slashGroups

SlashItem

Items of slashGroups (Suggested, Basic blocks, Media, Advanced blocks). filterSlash(query, groups) and slashItems(query, groups) filter them.

PropTypeDefault
id
string
label
string
icon
IconName
shortcut
string
description
string
badge
string
keywords
string
kind
BlockKind | null

Accessibility

  • The surface is role="dialog" labeled “Slash commands” holding one listbox (“Commands”) of labelled groups; aria-activedescendant names the highlighted option. Mouse-down is prevented so focus stays in the text; the list is also focusable so it can be scrolled and read on its own. With no match a status says “No results”.
  • The highlighted row scrolls into view as activeIndex changes.
  • Keyboard handling (↑ ↓ Enter Tab Esc) belongs to the owner; the Editor does it for you.
© 2026 Motion. Internal documentation.