Mention ComposerProv1.0.0
Write a note and mention people by typing @: suggestions open at the caret and narrow as you type, and a picked name becomes a mention that's highlighted, deleted as a whole and kept with its id. A real textarea underneath, so editing, spellcheck and undo stay native.
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-mention-composerNeeds your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.
Usage
Import it and pass your content. The props that matter most are listed next.
Example
"use client";
import * as React from "react";
import { MentionComposer, type MentionValue } from "@/components/ui/lumen/controls/mention-composer";
const team = [
{ id: "u1", label: "Maya Chen", description: "Design" },
{ id: "u2", label: "Tomás Ruiz", description: "Data" },
];
export function Comment() {
const [note, setNote] = React.useState<MentionValue>({ text: "", mentions: [] });
return <MentionComposer value={note} onValueChange={setNote} suggestions={team} placeholder="Write a comment, @ to mention" />;
}Props
suggestions–MentionEntity[] | (query, signal) => Promise<MentionEntity[]>Who can be mentioned ({ id, label, description? }): a list filtered as you type, or your search (abort on the signal).
value / defaultValue / onValueChange–{ text, mentions: { id, label, start, end }[] }The text and the mentions with their ids and positions. mentionSegments(value) gives ordered segments.
onSubmit–(value) => void⌘ / Ctrl + Enter.
trigger"@"stringThe character that starts a mention.
rows / placeholder / disabled3textarea propsAs on a textarea.
labels–objectsuggestions, noMatch and count(n), for other languages.
Source
components/ui/lumen/controls/mention-composer.tsx
This component is included with Pro.
Try the live preview above. Get Pro to install the source.
