How do I install the mention input?

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

How do suggestions work?

The menu springs in, items stagger, and a highlight slides between options as you arrow through them.

What can be mentioned?

People with @ and channels with #.

Mention Input

Pro

A single-line input that turns @people and #channels into inline chips. The suggestion menu springs in, items stagger, and a shared highlight slides between options as you arrow through them.

pnpm dlx shadcn@latest add @ditherui/mention-input

Props

PropTypeDefault

sourcesMentionSource[]—

placeholderstring—

onChange(value: string, mentions: Mention[]) => void—

classNamestring—

When to use the mention input

Use it for comment and chat fields. It turns @people and #channels into inline chips inside a single-line input.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

ChartRecharts charts on shadcn: bar, area and pie charts in patterned, dithered and gradient styles.
ButtonButtons with press feedback in every variant and size.
Dither ButtonA square-cornered button with a dithered fill that follows the pointer.