Mentions is installed into your project as a file you own. It takes every Ant Design Mentions prop, and the two rows marked antuikit in the API table are what the kit adds: a forwarded ref, and a clear button drawn with the close icon from your icon pack.
The icon is only added when allowClear is on, so a plain <Mentions> gets no clear button. A clearIcon you pass still wins.
Install
npx antuikit@latest init
npx antuikit@latest add mentions
The first command sets up your project once, with AntuikitProvider and the theme tokens. The second adds Mentions.
Import
Import from @/components/ui/mentions, not from antd. The file lives in your project, so the path is a project path.
import { Mentions } from "@/components/ui/mentions"
The axes
The props that take a fixed set of values. The Design tab's Figma properties follow them. size, variant and status work as on Input and Select.
size takes small, medium and large, and falls back to the size on ConfigProvider. middle still works as the older name for medium.
variant takes outlined (the default), filled, borderless and underlined.
status takes error and warning. It recolors the border and nothing else, so it needs a message beside it.
placement takes bottom (the default) and top, for which side the suggestion popup opens on. It flips on its own when it runs out of room.
direction takes ltr and rtl, and is inherited from ConfigProvider. It decides which corner of the field the popup aligns to as well as the text direction.
Flags
Each turns one behavior on. loading also turns on silent.
loading replaces the option list with a spinner while a request is out.
silent stops Enter from picking an option. loading turns it on so a stale name cannot be picked mid-request. Passing silent yourself overrides that.
autoFocus focuses the textarea on mount. Use it in a composer the reader just opened, not in a form they have to scroll to.
allowClear adds a button that empties the whole field. The kit draws it with the close icon from your icon pack.
disabled is also inherited, so a disabled Form disables the field without the prop.
Slots
The props that take a node, where your own markup goes. Use them before a descendant selector, which cannot reach the popup at all.
notFoundContent is the empty list. The default is the full Empty illustration, which is tall for a small popup. A single line of text reads better.
popupRender receives the default list and returns whatever wraps it, for a header, a footer or a fixed row above the options. Render the menu it hands you; building your own loses the keyboard.
children takes Mentions.Option elements, which are deprecated. The kit does not re-export them, so pass options instead.
allowClear's object form takes a clearIcon node. The kit fills it with your icon pack's close icon when you do not.
Events
onChange
onSelect
onSearch
onFocus
onBlur
onPopupScroll
Styling
classNames and styles take the same keys, one per part. Use them before a descendant selector: a part with a key stays stable across versions.
1
<Mentions
2
classNames={{
3
root: "…",
4
textarea: "…",
5
popup: "…",
6
suffix: "…",
7
}}
8
/>
A utility class on one of these keys wins without !important. Setting a component token's CSS variable on the root has no effect, so change the token in your theme or style the part instead.
API Reference
Mentions
Mentions's props. Rows marked antuikit in the Version column are added by the kit.