Tailwind CSS Voice Input Components

Dev Design Library indexes 25 Tailwind CSS voice input components from 13 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. Every library in this list styles its components with Tailwind CSS utility classes. Voice input components belong to the AI group.

• 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
• 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 Tailwind CSS voice input components

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

Related categories

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