184 Components
AI Prompt Input
InputsAuto-expanding AI textarea with a morphing submit button that transitions between arrow, spinner, and check states using spring physics. Includes character counter with color warnings and ⌘↵ keyboard shortcut.
Enter to send · Shift + Enter for new line
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/ai-prompt-input.json"
Props
TypeScript props supported by <AIPromptInput />.
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | "Ask anything…" | Textarea placeholder text. |
| maxLength | number | 500 | Maximum character count. |
| onSubmit | (value: string) => void | — | Called with trimmed text when submitted. |
| loading | boolean | false | External loading state — shows spinner and blocks submit. |
Key Features
- Auto-resizes vertically as content grows (max 180px).
- Submit button morphs: arrow → spinner → check with spring AnimatePresence.
- Character counter appears on first keystroke with color warnings near limit.
- ⌘↵ keyboard shortcut to submit.
- External loading state prop for async submit flows.
- prefers-reduced-motion: no button morph animation.
Keyboard & Accessibility
- aria-label on textarea and submit button.
- aria-multiline='true' on textarea.
- Disabled state on submit button when empty or loading.