Stop Rebuilding UI

Shadcn.io is not affiliated with official shadcn/ui

Previous: React AI Attachments
Next: React AI Branch

React AI Audio Player

React AI audio player component with playback controls for AI-generated speech

Play AI-generated audio with a sleek, customizable player. Built on media-chrome for consistent cross-browser behavior. Shows play/pause, seek forward/back, time display, progress bar, mute, and volume controls. Accepts either a URL or AI SDK SpeechResult data (base64 audio). Perfect for text-to-speech output, voice messages, or audio previews in AI interfaces.

Audio Player preview

Scroll to load preview

Installation

React AI Transcription

Speech transcript display

React AI Speech Input

Voice recording button

React AI Voice Selector

TTS voice selection

React AI Message

Chat message bubbles

React AI Artifact

Generated content container

React AI Tool

Tool execution display

FAQ

React AI Attachments

React AI attachments component for displaying file attachments with previews and actions

React AI Branch

React AI branch component with message versioning and navigation for chat regeneration workflows