Mention Picker Blueprint

About this block

Mention Picker Blueprint is the static open state of the @ mention picker rendered inline inside a comment composer strip, a composer showing Can you review the auth changes? @pri with the picker panel open below it. Six workspace members appear as rows (avatar, name, role, email) with Priya Nair highlighted at the top and an Enter badge signaling she is the keyboard selection. The footer reads: Keep typing to narrow results. Esc to dismiss.

The people array carries a highlighted flag on exactly one row so the keyboard selection is visible without any client state. Never uses a Radix portal.

When to use

Reach for this block as the design reference for building a real mention picker: it shows the expected open-state shape without the portal escape problem. Wire the real version to a fuzzy-match search over workspace members.

A natural flow around it on an Application Pro page:

Before

• Comment composer

After

• Activity feed
• Notifications

What you can display

One strong use is the inline @ mention picker for comments. Other picker shapes:

• Command palette style. A full-width panel with keyboard navigation across people, pages, and actions in one list.
• Assignee picker. The same shape scoped to members with an Assignee header rather than a mention trigger.
• Emoji picker. The panel swapped for a grid of emoji with a search row at the top.

Tip: show the keyboard hint (Enter to select, Esc to dismiss) in the panel footer so first-time users do not have to discover it by accident.