Voice Orb
A voice-input button: a glowing orb, a live waveform while listening and a breathing pulse while thinking.
voice-orb.tsxvoice-orb.css
Checking access…
Overview
Three states in one control. Idle shows a mic; listening spins the orb and drives a waveform; thinking breathes until you hand back control.
Pass a real input level (0–1) from the Web Audio API and the bars follow your voice.
When to use
- Voice assistants, dictation and agent UIs.
When not to use
- As the only way to give input: always pair with a text field.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/voice-orb.json$
npx shadcn@latest add https://sundaeui.dev/r/voice-orb.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/voice-orb.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/voice-orb.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-orb.tsx and voice-orb.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 { VoiceOrb } from '@/components/sundae/voice-orb'
<VoiceOrb state={state} onStateChange={setState} level={micLevel} />Props
| Prop | Type | Default |
|---|---|---|
stateControlled state. | 'idle' | 'listening' | 'thinking' | — |
onStateChangeCalled when pressed. | (s) => void | — |
levelLive mic level 0–1. | number | — |
barsWaveform bars. | number | 24 |
hueGradient. | 'iris' | 'ember' | 'mint' | 'iris' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- A toggle button (aria-pressed) named "Start/Stop voice input".
- The state label is a polite live region.
- Reduced motion freezes the orb and shows static bars.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Enter / Space
- Start or stop listening
FAQ
- Is Voice Orb free?
- Voice Orb is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Voice Orb?
- Run npx shadcn@latest add https://sundaeui.dev/r/voice-orb.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Voice Orb support keyboard and screen readers?
- A toggle button (aria-pressed) named "Start/Stop voice input". The state label is a polite live region.
- Does Voice Orb respect reduced motion?
- Reduced motion freezes the orb and shows static bars.
More like this
All components →Context Meter
Components · FuturisticAgent Steps
Components · Understated- Pro
Voice Recorder
Components · Refined - Pro
Reasoning Trace
Components · Refined Fold Accordion
Components · UnderstatedToast Stack
Components · Refined