Mention input

A textarea with @people and #channel mentions that act as single tokens, with suggestions at the caret.

$npx shadcn@latest add @silicon-ui/mention-input

inputsnew

Installation

$npx shadcn@latest add @silicon-ui/mention-input

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/mention-input/mention-input.tsx
- components/silicon-ui/mention-input/mention-input.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { MentionInput } from "@/components/silicon-ui/mention-input/mention-input";

Prop	Type	Default
`value`	`MentionValue`	—
`defaultValue`	`MentionValue`	—
`onChange`	`(value: MentionValue) => void`	—
`people` People offered after `@`. Leave it out to turn person mentions off.	`MentionPerson[]`	—
`channels` Channels offered after `#`. Leave it out to turn channel mentions off.	`MentionChannel[]`	—
`onMentionAdd` Called when a suggestion becomes a mention.	`(mention: Mention) => void`	—
`onSubmit` With `submitOnEnter`, Enter submits and Shift+Enter adds a line.	`(value: MentionValue) => void`	—
`submitOnEnter`	`boolean`	`false`
`placeholder`	`string`	—
`minRows`	`number`	`1`
`maxRows` The field grows to this many rows, then scrolls.	`number`	`8`
`placement` Where suggestions open. `auto` flips above when there is no room below.	`"auto" \| "top" \| "bottom"`	`"auto"`
`maxSuggestions`	`number`	`6`
`disabled`	`boolean`	—
`name`	`string`	—
`id`	`string`	—
`aria-label`	`string`	—
`aria-describedby`	`string`	—
`className`	`string`	—

Also accepts the props of HTMLAttributes.