React AI Prompt Input

The input box is where users spend most of their time in a chat app, so it needs to be good. This one does everything—auto-resizing textarea that grows with content, drag-and-drop file attachments with previews, paste support for images, speech-to-text if you want it, action buttons, dropdowns, even a command palette if you're feeling fancy. It's composable so you pick what you need. The textarea handles Enter to submit, Shift+Enter for newlines, all the keyboard stuff users expect. There's a provider pattern if you need to access the input state from outside (like clearing after send). We've iterated on this across multiple chat apps—it handles the edge cases you don't think about until you ship.

Prompt Input preview

Installation

npx shadcn@latest add https://www.shadcn.io/r/prompt-input.json

npx shadcn@latest add https://www.shadcn.io/r/prompt-input.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/prompt-input.json

bunx shadcn@latest add https://www.shadcn.io/r/prompt-input.json

Related Components

FAQ