React Voice Input Components

Dev Design Library indexes 25 React voice input components from 14 open-source UI libraries, with the most coming from Watermelon UI, OpenSourceUI, LocalMode, Libraries.dev and ReactFrame. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. 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
• 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…
• 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…
• 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 React voice input components

• Watermelon UI
• OpenSourceUI
• LocalMode
• Libraries.dev
• ReactFrame

Related categories

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