Voice Recorder
Record a voice clip: live level bars scroll while recording, pause / resume, then review with play and discard.
voice-recorder.tsxvoice-recorder.css
Checking access…
Overview
Pressing record starts a timer and a scrolling strip of level bars from the microphone (or a simulation in the demo). Pause freezes both; Stop moves to review.
Review shows the captured waveform with Play, Discard and Send. Uses MediaRecorder and an AnalyserNode when you pass getStream.
When to use
- Chat, support, voice notes, interview answers.
When not to use
- Long recordings: use a full recorder with editing.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/voice-recorder.json$
npx shadcn@latest add https://sundaeui.dev/r/voice-recorder.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/voice-recorder.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/voice-recorder.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy voice-recorder.tsx and voice-recorder.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { VoiceRecorder } from '@/components/sundae/voice-recorder'
<VoiceRecorder />Props
| Prop | Type | Default |
|---|---|---|
getStreamProvide a mic stream; omit for the simulated demo. | () => Promise<MediaStream> | — |
onSendCalled on Send. | (blob: Blob | null, seconds: number) => void | — |
maxSecondsStop automatically after this long. | number | 120 |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Record / pause / stop are labelled buttons; the timer is a timer role announced each 10 seconds.
- Microphone errors are announced.
- Reduced motion removes the movement and keeps every state change.
Customization
- Colours are CSS custom properties on .sd-vrc; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
FAQ
- Is Voice Recorder free?
- Voice Recorder is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Voice Recorder?
- Run npx shadcn@latest add https://sundaeui.dev/r/voice-recorder.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Voice Recorder support keyboard and screen readers?
- Record / pause / stop are labelled buttons; the timer is a timer role announced each 10 seconds. Microphone errors are announced.
- Does Voice Recorder respect reduced motion?
- Reduced motion removes the movement and keeps every state change.
More like this
All components →Voice Note
Components · Refined- Pro
Voice Orb
Components · Futuristic Permission Prompt
Components · RefinedPodcast Chapters
Components · RefinedMixer Faders
Components · RefinedToast Stack
Components · Refined