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.
"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>
);
}
Part of Dice UI — browse the full library on 21st.dev.