👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Full-Featured AI Prompt with Files
Full-featured AI prompt with drag-drop file uploads, attachment badges, settings toggles, and quick action buttons
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Building something like v0 or Bolt? This React AI prompt is the complete package—drag-drop file uploads with image previews, attachment badges with remove buttons, settings dropdown with auto-complete and streaming toggles via shadcn/ui Switch. Built with Tabler Icons and Next.js Image, it features Clone Screenshot, Import Figma, and Upload Project action buttons below the input. The drag overlay activates on file hover, making file uploads feel magical.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/ai-prompt-input-04.jsonnpx shadcn@latest add https://www.shadcn.io/registry/ai-prompt-input-04.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/ai-prompt-input-04.jsonbunx shadcn@latest add https://www.shadcn.io/registry/ai-prompt-input-04.jsonRelated blocks you will also like
Expandable AI Input
Auto-expanding with voice input
Model Selector Input
Input with quick prompts
Compact Settings Input
Minimal with mode toggles
AI File Upload
Standalone file upload component
AI Conversation
Chat thread display
AI Settings Panel
Configuration options