║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Mention description: A component that allows to mention items in a list by a trigger character. preview: true links: api: /docs/components/mention#api-reference

<ComponentTabs name="mention-demo" />

Installation

@diceui/mention

Installation with shadcn/ui

CLI

npx shadcn@latest add "https://diceui.com/r/mention"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @diceui/mention
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="mention" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import * as Mention from "@diceui/mention";

<Mention.Root>
  <Mention.Label />
  <Mention.Input />
  <Mention.Portal>
    <Mention.Content>
      <Mention.Item />
    </Mention.Content>
  </Mention.Portal>
</Mention.Root>

Examples

Custom Trigger

<ComponentTabs name="mention-custom-trigger-demo" />

With Custom Filter

<ComponentTabs name="mention-custom-filter-demo" />

API Reference

Root

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

<AutoTypeTable path="./types/docs/mention.ts" name="RootProps" />

<DataAttributesTable attributes={[ { title: "[data-state]", value: ["open", "closed"], }, { title: "[data-disabled]", value: "Present when disabled.", }, ]} />

Label

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

<AutoTypeTable path="./types/docs/mention.ts" name="LabelProps" />

Input

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

<AutoTypeTable path="./types/docs/mention.ts" name="InputProps" />

Portal

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

<AutoTypeTable path="./types/docs/mention.ts" name="PortalProps" />

Content

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

<AutoTypeTable path="./types/docs/mention.ts" name="ContentProps" />

<DataAttributesTable attributes={[ { title: "[data-state]", value: ["open", "closed"], }, { title: "[data-side]", value: ["top", "right", "bottom", "left"], }, { title: "[data-align]", value: ["start", "center", "end"], }, ]} />

<CSSVariablesTable variables={[ { title: "--dice-transform-origin", description: "Transform origin for cursor positioning.", }, { title: "--dice-available-width", description: "Available width in the viewport for the popover element.", }, { title: "--dice-available-height", description: "Available height in the viewport for the popover element.", }, ]} />

Item

An interactive option in the mention list.

<AutoTypeTable path="./types/docs/mention.ts" name="ItemProps" />

<DataAttributesTable attributes={[ { title: "[data-highlighted]", value: "Present when the item is highlighted.", }, { title: "[data-disabled]", value: "Present when the item is disabled.", }, { title: "[data-value]", value: "The value of the item.", }, ]} />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Enter"], description: "When open, selects the highlighted mention option." }, { keys: ["ArrowUp"], description: "When open, highlights the previous mention option." }, { keys: ["ArrowDown"], description: "When open, highlights the next mention option." }, { keys: ["Home"], description: "When open, highlights the first mention option." }, { keys: ["End"], description: "When open, highlights the last mention option." }, { keys: ["Escape"], description: "Closes the mention popover and returns focus to the input." }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║