Shadcn.io is not affiliated with official shadcn/ui
React AI Voice-First Prompt Block
React AI voice-first prompt block for Next.js with large microphone button, waveform visualization, and transcript display using shadcn/ui and Tailwind CSS
Build voice-first AI interfaces with a centered microphone button and live waveform visualization. This React block features a large animated recording button, a waveform display using styled bars, real-time transcript text, and a seamless toggle between voice and text input modes. Built with TypeScript, shadcn/ui Button and Textarea components, and Tailwind CSS animations, it integrates with Web Speech API or AI SDK speech-to-text in any Next.js project.
React AI Voice-First Prompt Block preview
Installation
Related Components
AI Message
Chat message component
AI Prompt Input
Message input area
AI Suggestion
Quick reply buttons
AI Actions
Action toolbar
FAQ
Was this page helpful?
Sign in to leave feedback.
React AI Multimodal Prompt Block
React AI multimodal prompt block for Next.js with image, audio, document, and URL attachment support using shadcn/ui and Tailwind CSS
React AI Prompt With Files Block
Full-featured AI prompt with drag-drop file uploads, attachment badges, settings toggles, and quick action buttons