Mention

Component 4

About

A textarea/input that pops up a searchable list of items (like users) when a trigger character such as @ is typed, letting people insert mentions inline.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Mention to your project and fits it to your theme.

Code

How Mention is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  Mention,
  MentionContent,
  MentionInput,
  MentionItem,
  MentionLabel,
} from "@/components/ui/mention";

const users = [
  {
    id: "1",
    name: "Olivia Martin",
    email: "olivia@email.com",
  },
  {
    id: "2",
    name: "Isabella Nguyen",
    email: "isabella@email.com",
  },
  {
    id: "3",
    name: "Emma Wilson",
    email: "emma@email.com",
  },
  {
    id: "4",
    name: "Jackson Lee",
    email: "jackson@email.com",
  },
  {
    id: "5",
    name: "William Kim",
    email: "will@email.com",
  },
];

export default function MentionDemo() {
  return (
    <Mention className="w-full max-w-[400px]">
      <MentionLabel>Mention users</MentionLabel>
      <MentionInput placeholder="Type @ to mention someone..." asChild>
        <textarea />
      </MentionInput>
      <MentionContent>
        {users.map((user) => (
          <MentionItem key={user.id} value={user.name}>
            <span className="text-sm">{user.name}</span>
            <span className="text-xs text-muted-foreground">{user.email}</span>
          </MentionItem>
        ))}
      </MentionContent>
    </Mention>
  );
}