Mention Input

Component 1

About

@-mention textarea with caret-anchored autocomplete, highlighted mention chips, async search and multiple trigger characters.

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

Code

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

Usage.tsx

"use client";

import * as React from "react";

import { MentionInput, type MentionItem } from "@/components/ui/mention-input";

const TEAM: MentionItem[] = [
  { id: "1", label: "sara", description: "Sara Kim · Design" },
  { id: "2", label: "liam", description: "Liam Chen · Engineering" },
  { id: "3", label: "noah", description: "Noah Patel · Product" },
];

export default function MentionInputDemo() {
  const [value, setValue] = React.useState(
    "Looks great @sara, can you take a final pass?",
  );

  return (
    <div className="w-full max-w-sm">
      <MentionInput
        value={value}
        onValueChange={setValue}
        items={TEAM}
        placeholder="Type @ to mention someone…"
      />
    </div>
  );
}