Yami UI

A textarea with @ mention autocomplete for tagging users or items.

Installation

Add the mention input component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/mention-input.json

Usage

"use client"
import { Textarea } from "@/components/ui/textarea"
import { useMention, MentionList } from "@/components/ui/mention-input"

const members = [
  { id: "1", label: "alice", description: "Designer" },
  { id: "2", label: "bob",   description: "Engineer" },
]

function MyInput() {
  const { inputProps, open, listProps } =
    useMention({ items: members, onMention: (item) => console.log(item) })

  return (
    <div className="relative">
      <Textarea {...inputProps} placeholder="Type @ to mention..." />
      {open && <MentionList {...listProps} />}
    </div>
  )
}

Examples

With Textarea

Type @ to open suggestions — compose with any input

Code

"use client"
import { Textarea } from "@/components/ui/textarea"
import { useMention, MentionList } from "@/components/ui/mention-input"

function MyInput() {
  const { inputProps, open, listProps } = useMention({ items: members })

  return (
    <div className="relative">
      <Textarea {...inputProps} placeholder="Type @ to mention..." />
      {open && <MentionList {...listProps} />}
    </div>
  )
}

Custom trigger (#)

Use # for hashtag-style suggestions

Code

import { useMention, MentionList } from "@/components/ui/mention-input"

function TagInput() {
  const { inputProps, open, listProps } = useMention({ items: topics, trigger: "#" })

  return (
    <div className="relative">
      <Textarea {...inputProps} placeholder="Type # to add a tag..." />
      {open && <MentionList {...listProps} />}
    </div>
  )
}