Dice UI

Mention users

Installation

pnpm add @diceui/mention

Installation with shadcn/ui

pnpm dlx shadcn@latest add @diceui/mention

Layout

Import the parts, and compose them together.

import {
  Mention,
  MentionLabel,
  MentionInput,
  MentionPortal,
  MentionContent,
  MentionItem,
} from "@diceui/mention";
 
return (
  <Mention>
    <MentionLabel />
    <MentionInput />
    <MentionPortal>
      <MentionContent>
        <MentionItem />
      </MentionContent>
    </MentionPortal>
  </Mention>
)

Examples

Custom Trigger

With Custom Filter

API Reference

Mention

The container for all mention parts. Mention tags can be styled using the data-tag attribute within the root.

Prop

Type

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-disabled]`	Present when disabled.

MentionLabel

An accessible label that describes the mention input. Associates with the input element for screen readers.

Prop

Type

MentionInput

The text input field that users can type into to trigger mentions.

Prop

Type

MentionPortal

A portal for rendering the mention content outside of its DOM hierarchy.

Prop

Type

MentionContent

The popover container for mention items. Positions the mention popover relative to the cursor position.

Prop

Type

Data Attribute	Value
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"top" \| "right" \| "bottom" \| "left"`
`[data-align]`	`"start" \| "center" \| "end"`

CSS Variable	Description
`--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.

MentionItem

An interactive option in the mention list.

Prop

Type

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.

Mention

On this page