Skip to content

Mentions that
just work

A headless React hook for inline suggestions. @mentions, #tags, /commands — from one tiny primitive.

5 lines to get started
import { Mentions } from "@skyastrall/mentions-react"

<Mentions
  triggers={[{ char: "@", data: users }]}
  onChange={(markup, plainText) => save(markup)}
/>
Features
01

Multi-trigger

@ for users, # for tags, / for commands — each with its own data source, color, and config.

02

Three API layers

Drop-in component, compound components, or headless hook. Pick your level of control.

03

Ghost text

Dimmed inline AI completions. Tab to accept. Wire up any LLM in 5 lines of code.

04

~14KB total gzipped

Core is ~8KB, React adapter is ~5KB. Zero runtime dependencies. No bloat.

05

AI-ready

Async data with context — textBefore, textAfter, activeMentions. Built for LLM suggestions.

06

Accessible

WAI-ARIA combobox pattern. Full keyboard navigation. Screen reader support.