A Modern react-mentions Alternative (with Migration Guide)

react-mentions is still downloaded hundreds of thousands of times a week, but its scope never grew past one feature: @mentions over a textarea. If your product has moved on to AI chat — where you also want /commands, #tags, attachments, and structured output — you have likely outgrown it.

Prompt Area is a modern alternative that keeps the mentions you rely on and adds everything a chat composer needs, with zero extra dependencies. This guide covers the differences and a concrete migration path.

What you gain

• /slash commands and #hashtag tags using the same trigger model as mentions
• Inline markdown, file and image attachments, and undo/redo
• Structured chip output instead of parsing a markup string
• Companion components: Action Bar, Status Bar, Compact, and Chat Prompt Layout
• Active maintenance and shadcn registry distribution you own

The mental-model shift

react-mentions gives you a markup string you parse afterward. Prompt Area gives you typed segments. Instead of regexing "@[Name](id)" out of a string, you read chips directly. That single change removes a whole class of brittle parsing code.

Step 1 — Install Prompt Area

npx shadcn@latest add https://prompt-area.com/r/prompt-area.json

Step 2 — Replace MentionsInput

A typical react-mentions setup looks like this:

// Before — react-mentions
<MentionsInput value={value} onChange={(e) => setValue(e.target.value)}>
  <Mention trigger="@" data={users} />
</MentionsInput>

The equivalent with Prompt Area uses the state hook and a mention trigger:

// After — Prompt Area
import { PromptArea } from '@/components/prompt-area'
import { usePromptAreaState } from '@/components/use-prompt-area-state'
import { mentionTrigger } from '@/components/trigger-presets'

const { bind } = usePromptAreaState()
const searchUsers = (q: string) =>
  users.filter((u) => u.label.toLowerCase().includes(q.toLowerCase()))

<PromptArea {...bind} triggers={[mentionTrigger({ onSearch: searchUsers })]} />

Map your data shape

react-mentions data is usually { id, display }. Prompt Area items use { value, label, description? }. A one-line map handles the conversion:

const users = rawUsers.map((u) => ({ value: u.id, label: u.display }))

Step 3 — Read mentions as data

Drop the markup parsing. Read resolved mentions directly:

import { getChipsByTrigger } from '@/components/segment-helpers'

const mentioned = getChipsByTrigger(bind.value, '@').map((c) => c.value)

Step 4 — Add what react-mentions never had

Now that mentions work, opt into the rest by adding triggers. Commands and tags reuse the exact same pattern:

import { commandTrigger, hashtagTrigger } from '@/components/trigger-presets'

<PromptArea
  {...bind}
  triggers={[
    mentionTrigger({ onSearch: searchUsers }),
    commandTrigger({ onSearch: searchCommands }),
    hashtagTrigger({ onSearch: searchTags }),
  ]}
/>

You can migrate incrementally: start with mentions to reach parity, then add commands, tags, and attachments as you need them.

When to stay on react-mentions

If you genuinely only need @mentions and want the smallest possible surface area on an existing, working integration, react-mentions is fine. The case for switching is when you need more than mentions — which, for most AI products, happens fast.