Components
Installation
Installation with shadcn/ui
CLI
Manual
Install the following dependencies:
Copy and paste the following code into your project.
Layout
Import the parts, and compose them together.
Examples
Custom Trigger
With Custom Filter
API Reference
Root
The container for all mention parts. Mention tags can be styled using the data-tag
attribute within the root.
Prop | Type | Default |
---|---|---|
defaultValue | string[] | - |
value | string[] | - |
onValueChange | (value: string[]) => void | - |
asChild | boolean | - |
open | boolean | - |
defaultOpen | boolean | - |
onOpenChange | (open: boolean) => void | - |
inputValue | string | - |
onInputValueChange | (value: string) => void | - |
trigger | string | - |
disabled | boolean | - |
onFilter | (options: string[], term: string) => string[] | - |
exactMatch | boolean | false |
loop | boolean | false |
modal | boolean | false |
readonly | boolean | false |
required | boolean | false |
name | string | - |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-disabled] | Present when disabled. |
Label
An accessible label that describes the mention input. Associates with the input element for screen readers.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
Input
The text input field that users can type into to trigger mentions.
Prop | Type | Default |
---|---|---|
asChild | boolean | - |
Portal
A portal for rendering the mention content outside of its DOM hierarchy.
Prop | Type | Default |
---|---|---|
container | HTMLElement | DocumentFragment | document.body |
Content
The popover container for mention items. Positions the mention popover relative to the cursor position.
Prop | Type | Default |
---|---|---|
side | Side | "bottom" |
sideOffset | number | 4 |
align | Align | "start" |
alignOffset | number | 0 |
collisionBoundary | Boundary | - |
collisionPadding | number | Partial<Record<Side, number>> | 0 |
arrowPadding | number | 0 |
sticky | "partial" | "always" | "partial" |
strategy | Strategy | "absolute" |
avoidCollisions | boolean | true |
fitViewport | boolean | false |
forceMount | boolean | false |
hideWhenDetached | boolean | false |
trackAnchor | boolean | true |
asChild | boolean | - |
onEscapeKeyDown | (event: KeyboardEvent) => void | - |
onPointerDownOutside | (event: PointerDownOutsideEvent) => void | - |
Data Attribute | Value |
---|---|
[data-state] | "open" | "closed" |
[data-side] | "top" | "right" | "bottom" | "left" |
[data-align] | "start" | "center" | "end" |
CSS Variable | Description | Default |
---|---|---|
--dice-transform-origin | Transform origin for cursor positioning. | — |
--dice-available-width | Available width in the viewport for the popover element. | — |
--dice-available-height | Available height in the viewport for the popover element. | — |
Item
An interactive option in the mention list.
Prop | Type | Default |
---|---|---|
label | string | - |
asChild | boolean | - |
value | string | - |
disabled | boolean | - |
Data Attribute | Value |
---|---|
[data-highlighted] | Present when the item is highlighted. |
[data-disabled] | Present when the item is disabled. |
[data-value] | The value of the item. |
Accessibility
Keyboard Interactions
Key | Description |
---|---|
Enter | When open, selects the highlighted mention option. |
ArrowUp | When open, highlights the previous mention option. |
ArrowDown | When open, highlights the next mention option. |
Home | When open, highlights the first mention option. |
End | When open, highlights the last mention option. |
Escape | Closes the mention popover and returns focus to the input. |