Mentions

Textarea input with @mentions, #hashtags, and other triggers for autocomplete suggestions.

Basic Usage

Type @ to trigger user mentions. The dropdown appears with matching suggestions.

Type @ to mention

With Avatars

Display user avatars in the mention dropdown for better visual recognition.

Type @ to mention

Custom Trigger (#)

Use # to trigger tag suggestions for categorizing content.

Type # to mention

Channel References

Reference channels with # trigger for Slack-like mentions.

Type # to mention

Multi-line Input

Works with larger text areas for comments, messages, and posts.

Type @ to mention

API Reference

MentionsProps

Prop	Type	Default	Description
value	string	''	Controlled value of the textarea
onChange	(value: string) => void	-	Callback when value changes
onMention	(option: MentionOption) => void	-	Callback when a mention is selected
options	MentionOption[]	[]	Available mention options
trigger	string	'@'	Character that triggers the dropdown
placeholder	string	-	Placeholder text
rows	number	4	Number of visible text rows
disabled	boolean	false	Disable the input
className	string	-	Additional CSS classes

MentionOption

Property	Type	Description
id	string	Unique identifier for the option
display	string	Display text for the mention
avatar	string	Optional avatar image URL
metadata	Record<string, any>	Optional additional data

Usage

import { Mentions, type MentionOption } from '@/components/ui/mentions'

const users: MentionOption[] = [
  { id: '1', display: 'Alice Johnson', avatar: '/avatars/alice.jpg' },
  { id: '2', display: 'Bob Smith', avatar: '/avatars/bob.jpg' },
  { id: '3', display: 'Carol Williams', avatar: '/avatars/carol.jpg' },
]

function MyComponent() {
  const [value, setValue] = useState('')

  return (
    <Mentions
      value={value}
      onChange={setValue}
      options={users}
      placeholder="Type @ to mention someone..."
      onMention={(option) => {
        console.log('Mentioned:', option)
      }}
    />
  )
}