npm + shadcn · zero dependencies

The shadcn chat input for React

A production-grade textarea for AI chat interfaces — @mentions, /commands, #tags, inline markdown, and file attachments in one contentEditable component.

Prompt for Claude Code, Cursor & Codex

Everything in one input

One component replaces five libraries — no ProseMirror, Slate, or Lexical.

Trigger-Based Chips
Type @, /, or # to invoke mentions, commands, and tags that resolve into structured chips.
Inline Markdown & Rich Paste
Bold, italic, lists, and auto-linked URLs render live as you type. Paste from Slack, Notion, or Google Docs and it converts to clean markdown.
Undo & Redo
Full history stack with Ctrl+Z / Ctrl+Shift+Z. Every action is tracked and reversible.
File & Image Attachments
Paste screenshots or attach files with thumbnails, loading states, and remove buttons built in.
Action Bar
A toolbar component with left and right slots that pairs with PromptArea for a complete chat input.
Dark Mode Ready
Full light and dark theme support via CSS variables. Adapts automatically to your app’s theme.
Accessible by Default
ARIA labels, keyboard navigation, screen reader announcements, and focus management built in.
shadcn Registry
Install with one command. No extra dependencies. Copy-paste friendly and fully customizable.

Components & layouts

Compose the input with companions to build full chat experiences.

Built-in agent styles

Real, copy-paste compositions modeled on the agent UIs you already know.

OpenAI
Anthropic
Google
Perplexity

A modern alternative

Lighter than Tiptap, Lexical, or Plate for chat inputs — and a drop-in upgrade from react-mentions. See the honest, side-by-side breakdowns.

Compare alternatives

Drop it into your app

Install with an AI agent, from npm, or copy the source via the shadcn registry. Zero extra dependencies.

Prompt for Claude Code, Cursor & Codex