Shadcn.io is not affiliated with official shadcn/ui
AI Prompt Voice First
A React AI voice-first prompt block for Next.js with large microphone button, animated waveform visualization, live transcript display, and push-to-talk built with shadcn/ui and Tailwind CSS
Build voice-first AI interfaces with a centered microphone button and live waveform visualization with this prompt block for React and Next.js. Features a large animated recording button with pulse effect, a 32-bar waveform display with smooth height transitions, real-time transcript with editable text, voice-to-text mode switching, and recording duration timer. Built with TypeScript, shadcn/ui Button and Badge components, motion/react spring animations, and Tailwind CSS. Perfect for voice assistants, hands-free AI interactions, and accessibility-focused chat interfaces.
Related Components
AI Voice Assistant
Full voice assistant with responses
AI Chat Minimal
Minimal text chat interface
AI Multimodal Prompt
Prompt with file attachments
AI Prompt With History
Prompt with history recall
AI Chat Floating Widget
Floating chat bubble widget
AI Prompt Model Selector
Prompt with model selection
FAQ
Was this page helpful?
Sign in to leave feedback.
Prompt Multimodal
A React AI multimodal prompt block for Next.js with image, audio, document, and URL attachment support including drag-drop and preview thumbnails built with shadcn/ui and Tailwind CSS
Prompt With Files
A React AI prompt with file attachments block for Next.js featuring drag-drop upload, file type icons, upload progress bars, and settings toggles built with shadcn/ui and Tailwind CSS