feat(registry): add the styled suggestion menu

[kianbazza]

Summary

Adds the styled suggestion-menu registry component (npx shadcn add …/r/suggestion-menu, installed as suggestion-menu-preview.tsx), styled to match the registry's dropdown menu.

• The popup matches the dropdown's: bordered, drop-shadow-xl, scale-in from the anchor, 8px offset.
• Rows are 32px with an inset rounded highlight. Group labels, separators, icons, Empty and Loading use the dropdown's styles, and Loading shows the dropdown's diamond spinner by default. The spinner is copied into this file so the component installs on its own, as the dropdown's does. It's exported as DiamondSpinner.
• The list scrolls inside a Base UI ScrollArea with the dropdown's scroll fade, capped by the room left on screen, because a held side can't flip. It never grows wider than the popup: ScrollArea's min-width: fit-content is overridden, so long labels truncate instead of being clipped.
• SuggestionMenu.Shortcut shows an editor shortcut as a hint, one <kbd> per key. It's display-only, because binding the keys would take them from the text field.
• Every part passes a function className through.

The docs page gains the components tier, with installation from the registry and five styled examples:

• Textarea: @ mentions and / commands in one field, choosing the rows by payload.trigger.char.
• Mentions: Linear's @ menu, with Users and Projects groups and a separator.
• Slash commands: Linear's 13 editor commands with icons and shortcut hints, using noResults="close".
• Emoji: a : trigger on an <input> with minLength: 1.
• Async: a local Recent group plus a debounced TanStack Query search that keeps previous results. The diamond spinner shows next to "People" while a search is in flight, and as a row in the gap before a search answers when nothing local matches.

The example fields turn off Inter's contextual alternates, so @ doesn't jump up when a capital follows it. Linear does the same on its trigger chip.

Evidence

• bun run registry:build passes. The entry declares @bazza-ui/react, @base-ui/react and class-variance-authority, and needs no helper files.
• apps/web type-checks. bun run check passes. packages/react type-checks and its 1,507 tests pass.
• Each example was driven in the browser on the docs site. The mentions and slash menus were compared against Linear's.
• A throwaway test with the primitive confirmed that without that spinner row, the async popup renders blank between a query that matches nothing locally and its settled result.

Merge Danger

Door: two-way

Blast Radius: registry and docs only

Closes UI-567

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
ui-canary	Ready	Preview	Sep 29, 2026 2:31pm UTC

[linear-code]

UI-567