Mention Input

A comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.

src/registry/ui/mention-input.tsx/r/mention-input.json

Installation#

bash

npx shadcn@latest add @minidev/mention-input

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/mention-input.json

Usage#

tsx

import { MentionInput } from "@/components/ui/mention-input"

export function Example() {
  return (
    <MentionInput value={mention} onChange={setMention} suggestions={["aman", "mina", "lux"]} />
  )
}

API reference#

MentionInput props
Prop	Type	Default
`value`	`string`	`-`
`onChange`	`(value: string) => void`	`-`
`suggestions`	`string[]`	`[]`
`disabled`	`boolean`	`-`
`className`	`string`	`-`
`id`	`string`	`-`
`placeholder`	`string`	`"Write a comment… use @ to mention"`
`aria-label`	`string`	`-`