---
title: "Mention"
description: "A textarea that suggests people, files or commands when you type @ or /, with a list at the caret, arrow-key selection and Enter or Tab to insert."
plan: Free
docs: https://ui.edbn.me/docs/components/mention
---

# Mention

A textarea that suggests people, files or commands when you type @ or /, with a list at the caret, arrow-key selection and Enter or Tab to insert.

## Installation

```bash
npx shadcn@4.19.0 add https://ui.edbn.me/r/mention.json
```

## Dependencies
- npm: @base-ui/react@^1.8.0
- edbn: edbn-base, input-group

## Usage

```tsx examples/mention-basic.tsx
"use client";
import * as React from "react";
import { InputGroup } from "@/components/ui/input-group";
import {
  Mention,
  MentionItem,
  MentionItemDescription,
  MentionList,
  MentionPopup,
  MentionStatus,
  MentionTextarea,
} from "@/components/ui/mention";

type Person = { id: string; label: string; team: string };

const people: Person[] = [
  { id: "maya", label: "Maya Chen", team: "Design" },
  { id: "jonah", label: "Jonah Park", team: "Engineering" },
  { id: "priya", label: "Priya Raman", team: "Product" },
];

export default function MentionBasicPreview() {
  const [text, setText] = React.useState("");
  const [message, setMessage] = React.useState("");

  return (
    <div className="w-full max-w-wide">
      <Mention<Person>
        value={text}
        onValueChange={setText}
        triggers={[{ char: "@", allowSpace: true }]}
        items={({ query }) =>
          people.filter((person) =>
            person.label.toLowerCase().includes(query.trim().toLowerCase())
          )
        }
        onItemInsert={(person) => setMessage(`Mentioned ${person.label}`)}
      >
        <InputGroup variant="composer">
          <MentionTextarea
            rows={1}
            aria-label="Message"
            placeholder="Type @ to mention someone"
          />
        </InputGroup>
        <MentionPopup>
          <MentionList>
            {(person: Person) => (
              <MentionItem key={person.id} value={person}>
                {person.label}
                <MentionItemDescription>{person.team}</MentionItemDescription>
              </MentionItem>
            )}
          </MentionList>
        </MentionPopup>
        <MentionStatus>{message}</MentionStatus>
      </Mention>
    </div>
  );
}
```

## Files
- components/ui/mention.tsx (628 lines)

## For agents
- Base theme, once per project: npx shadcn@4.19.0 add https://ui.edbn.me/r/edbn-base.json
- MCP server with search, items, examples and source: https://ui.edbn.me/mcp
- Every page and item: https://ui.edbn.me/llms.txt