Question 1

What is the best React textarea component for AI chat?

Accepted Answer

Prompt Area is a production-grade React textarea built specifically for AI chat interfaces. It combines @mentions, /commands, #tags, inline markdown, and file attachments in a single component with zero extra dependencies. Distributed as a shadcn registry component, it installs with one command and includes companion components like Action Bar, Status Bar, and Chat Prompt Layout.

Question 2

How does Prompt Area compare to Tiptap and Lexical?

Accepted Answer

Prompt Area is purpose-built for prompt and chat inputs with zero dependencies, while Tiptap (ProseMirror-based, 3+ deps) and Lexical (plugin-based, 2+ deps) are general-purpose editor frameworks. Choose Tiptap or Lexical for full document editing with collaborative features. Choose Prompt Area for a lightweight, ready-to-use chat input with mentions, commands, tags, and file attachments.

Question 3

How do I add @mentions to a React textarea?

Accepted Answer

Install Prompt Area via the shadcn registry: npx shadcn@latest add https://prompt-area.com/r/prompt-area.json. Then configure a trigger with char "@" and mode "dropdown" to enable @mentions with search and dropdown suggestions. Prompt Area also supports /commands and #tags using the same trigger system.

Question 4

Does Prompt Area work with Next.js and shadcn/ui?

Accepted Answer

Yes. Prompt Area is distributed as a shadcn registry component and is designed for Next.js and React projects using Tailwind CSS. It installs with a single command and requires no additional dependencies beyond React and your existing shadcn/tailwind setup.

Question 5

What are the best alternatives to react-mentions?

Accepted Answer

Prompt Area is the best alternative to react-mentions if you need more than basic @mentions. It adds /slash commands, #hashtag tags, inline markdown formatting, file and image attachments, undo/redo, and companion components like Action Bar and Chat Prompt Layout — all with zero extra dependencies.

Prop	Type	Default	Description
`value`	`Segment[]`	`—`	The document segments (controlled).
`onChange`	`(segments: Segment[]) => void`	`—`	Called when the content changes.
`triggers`	`TriggerConfig[]`	`—`	Trigger configurations for @mentions, /commands, #tags, and callbacks.
`placeholder`	`string \| string[]`	`—`	Placeholder text. Pass an array to animate between several.
`markdown`	`boolean`	`—`	Render inline markdown (bold, italic, URLs, lists).
`disabled`	`boolean`	`false`	Whether the input is disabled.
`className`	`string`	`—`	Additional CSS class for the container.

Prop	Type	Default	Description
`minHeight`	`number`	`80`	Minimum height in pixels.
`maxHeight`	`number`	`—`	Maximum height in pixels.
`autoGrow`	`boolean`	`false`	Grow to fit content on focus, shrink on blur.
`autoFocus`	`boolean`	`—`	Auto-focus on mount.
`'aria-label'`	`string`	`—`	Accessible label for the input.

Prop	Type	Default	Description
`onSubmit`	`(segments: Segment[]) => void`	`—`	Enter pressed without Shift.
`onEscape`	`() => void`	`—`	Escape pressed.
`onChipClick`	`(chip: ChipSegment) => void`	`—`	A chip element was clicked.
`onChipAdd`	`(chip: ChipSegment) => void`	`—`	A chip was added (selection, auto-resolve, paste, or insert).
`onChipDelete`	`(chip: ChipSegment) => void`	`—`	A chip was deleted (backspace or forward delete).
`onLinkClick`	`(url: string) => void`	`—`	A URL link was clicked.
`onPaste`	`(data: { segments; source }) => void`	`—`	Content pasted; source is 'internal' \| 'external'.
`onUndo / onRedo`	`(segments: Segment[]) => void`	`—`	After an undo or redo, with the restored segments.

Prop	Type	Default	Description
`images`	`PromptAreaImage[]`	`—`	Image attachments to display.
`imagePosition`	`'above' \| 'below'`	`'above'`	Where the image strip renders.
`onImagePaste`	`(file: File) => void`	`—`	An image was pasted from the clipboard.
`files`	`PromptAreaFile[]`	`—`	File attachments to display.
`filePosition`	`'above' \| 'below'`	`'above'`	Where the file strip renders.
`onImageRemove / onFileRemove`	`(item) => void`	`—`	The remove button on an attachment was clicked.

Prop	Type	Default	Description
`focus()`	`() => void`	`—`	Focus the editable area.
`blur()`	`() => void`	`—`	Blur the editable area.
`insertChip()`	`(chip: Omit<ChipSegment, 'type'>) => void`	`—`	Insert a chip at the cursor.
`getPlainText()`	`() => string`	`—`	Current plain text.
`clear()`	`() => void`	`—`	Clear all content.

Getting Started

Components

Examples

Tools

API Reference

More

PromptArea Props

Core

Sizing & focus

Event callbacks

Attachments

Imperative handle