Components
Loading preview...
A voice input component with an animated visualizer and recording timer. It includes a demo mode, customizable visualizer, and recording callbacks. Features: • Animated audio visualizer • Recording timer display • Demo/preview mode • Start/stop callbacks • Dark mode support • Customizable visualizer bars • Mobile responsive
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/ai-voice-inputimport { AIVoiceInput } from "@/components/ui/ai-voice-input";
import { useState } from "react";
export function AIVoiceInputDemo() {
const [recordings, setRecordings] = useState<{ duration: number; timestamp: Date }[]>([]);
const handleStop = (duration: number) => {
setRecordings(prev => [...prev.slice(-4), { duration, timestamp: new Date() }]);
};
return (
<div className="space-y-8">
<div className="space-y-4">
<AIVoiceInput
onStart={() => console.log('Recording started')}
onStop={handleStop}
/>
</div>
</div>
);
}