AI & AgentsPro

Mention Picker

The @ picker for adding context to a prompt: files, people and channels in groups.

Usage

bash

npm install @wunderui/react

Then import what you need:

tsx

import { MentionPicker } from "@wunderui/react"

Grouped results; the first match is selected.

How the component is used inside real screens — the same compositions as the Usage section of the Figma page.

Typing @ opens the picker; a chosen file, person or channel becomes a removable pill above the prompt.

tabs.tsx#design-system

⌘↵

Prop	Type	Default
groups	{ heading: string; items: MentionItem[] }[]	—
query	string	""
activeId / onActiveIdChange	string / (id: string) => void	first match
onSelect	(item: MentionItem) => void	—