For AI agents: the documentation index is at /llms.txt, and any docs page is available as Markdown by appending .md to its URL.

Editor suggestion

Verified

The generic suggestion menu behind mentions and commands: async items, keyboard control, and focus that stays in the document.

When to use

Use when: A menu that opens when a trigger character is typed in a Tiptap editor, such as @ for mentions.
Avoid when: Block commands from a slash; use Editor Slash Menu.

Installation

bunx shelf add editor-suggestion

The source lands in src/components/ui/editor-suggestion.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import { EditorSuggestion } from "@/components/ui/editor-suggestion";

<EditorSuggestion
  editor={editor}
  name="mention"
  char="@"
  items={(query) => people.filter((p) => p.label.toLowerCase().includes(query.toLowerCase()))}
  onSelect={(person, { editor, range }) => insertMention(editor, range, person)}
/>

Built on

Packages: @floating-ui/dom, @stylexjs/stylex, @tiptap/core, @tiptap/pm, @tiptap/suggestion
Shelf items: foundations, utils
Figma: Optional native Figma library. See Designers.

Verified

Size: 2.6 kB gzipped on its own, 87 kB with the Shelf items and packages it builds on. JS and CSS in a production build, without React.
Accessibility: Axe passes on 3 stories
Behavior: 3 interaction tests in Storybook
React Compiler: Compiles with React Compiler
React Doctor: React Doctor finds nothing