Mention Input
A comment box where typing @ opens a filtered people list; picking someone inserts a mention token.
mention-input.tsxmention-input.css
Checking access…
Overview
Type @ and a small list appears under the caret, filtering as you type. Arrow keys and Enter pick, Escape dismisses, and the mention is inserted as @Name with a trailing space.
Mentions render bold in the preview line under the field, and the list of mentioned people is returned with the text.
When to use
- Comments, chat, task descriptions, docs.
When not to use
- Rich text editors: use the editor’s own mention plugin.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/mention-input.json$
npx shadcn@latest add https://sundaeui.dev/r/mention-input.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/mention-input.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/mention-input.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy mention-input.tsx and mention-input.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { MentionInput } from '@/components/sundae/mention-input'
<MentionInput />Props
| Prop | Type | Default |
|---|---|---|
people*People to mention. | { id: string; name: string; handle: string }[] | — |
onSubmitCalled on post. | (text: string, mentions: string[]) => void | — |
placeholderPlaceholder. | string | — |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- The textarea is a combobox while the list is open, with aria-activedescendant on the active person.
- Escape closes the list without clearing text.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-mni; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- @
- Open people list
- ↑ / ↓
- Move
- Enter / Tab
- Insert
- Esc
- Close
FAQ
- Is Mention Input free?
- Mention Input is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Mention Input?
- Run npx shadcn@latest add https://sundaeui.dev/r/mention-input.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Mention Input support keyboard and screen readers?
- The textarea is a combobox while the list is open, with aria-activedescendant on the active person. Escape closes the list without clearing text.
- Does Mention Input respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All forms →Markdown Editor
Forms · RefinedSearch Field
Forms · RefinedCharacter Limit Field
Forms · Refined- Pro
Address Autocomplete
Forms · Refined OTP Field
Forms · Refined- Pro
Drop Zone
Forms · Refined