Voice Input Components

Dev Design Library indexes 29 voice input components from 17 open-source UI libraries, with the most coming from Watermelon UI, OpenSourceUI, LocalMode, Libraries.dev and sv-particles. Each one links to its page with the source code, a live preview where available, the library license and the install command. Voice input components belong to the AI group.

• Voice PillReact Bits · ReactMic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or…
• V
  Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
• Button MicrophoneAmicro Micro Transitions · React
• Speech InputAI Elements · ReactA button component that captures voice input and converts it to text, with cross-browser support.
• AI VoiceKokonut UI · ReactVoice input with a scrolling waveform, then a take you can play back, discard or send.
• Voice InputSpectrum UI · ReactA voice recorder pill with animated level bars and a live timer.
• Audio Recorder WidgetOpenSourceUI · React
• Hold To TalkKinetics · HTML/CSSA live waveform blooms while you hold, then commits on release
• Voice RecorderSwiftPieces · SwiftUIHold to record a voice message: the glass mic swells into a recording capsule; slide to cancel or lock, let go to send.
• Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
• Transcribe Voice MessageWatermelon UI · React
• Voice OrbUI Lab · ReactA glassy orb of drifting mist that listens to your real mic, thinks in a slow swirl and breathes as it speaks.
• Voice ButtonLocalMode · ReactA press-to-record / release-to-transcribe push-to-talk button with an explicit visual state machine: idle -> recording…
• Chat Input With Voice And Send Buttonsv-particles · Svelte
• Voice Chat WidgetSpaceUI · ReactAn expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel…
• Voice MemoFibo · ReactAn aluminium recorder that writes down what you say, with the transcript filling in beside it as you talk.
• AI Voice 01ReactFrame · ReactA voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring…
• V
  Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
• Recorder Face WidgetOpenSourceUI · React
• Voice Chat DisclosureWatermelon UI · React
• Live Transcription BlockLocalMode · ReactOpen-mic streaming speech-to-text (useLiveTranscribe) with VAD-segmented utterances, plus a listen→plan→speak…
• Search Input With Loader And Voicesv-particles · Svelte
• AI Voice 05ReactFrame · ReactA portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap…
• Voice Assistant WidgetOpenSourceUI · React
• Voice NoteWatermelon UI · React
• Voice Notes BlockLocalMode · ReactRecord (push-to-talk from a selectable mic) or upload audio → Whisper/Moonshine transcription → saved notes with…
• Voice Note BaseWatermelon UI · React
• Voice TranscribeWatermelon UI · React
• Voice Transcribe BaseWatermelon UI · React

Libraries with voice input components

• Watermelon UI
• OpenSourceUI
• LocalMode
• Libraries.dev
• sv-particles

Related categories

• React Voice Input Components
• Tailwind CSS Voice Input Components
• Animated Voice Input Components
• AI Element Components
• Prompt Input Components
• AI Orb Components
• Conversation Components
• Attachment Components
• Thinking Indicator Components
• Model Selector Components
• Tool Call Components
• Sources Components
• Streaming Text Components
• Reasoning Components
• AI Message Components
• Citation Components
• Suggestions Components
• Task Queue Components
• Agent Plan Components