Skip to main content

​
ElevenLabs voice UI components for React

ElevenLabs can power conversational voice experiences. orb-ui gives those experiences a visible React UI layer: an animated orb, audio-reactive feedback, and predictable voice states.

​
Install

Install both orb-ui and the ElevenLabs client package used by the adapter: 
npm install orb-ui @elevenlabs/client

​
Use the adapter

import { Conversation } from '@elevenlabs/client'
import { Orb } from 'orb-ui'
import { createElevenLabsAdapter } from 'orb-ui/adapters'

const adapter = createElevenLabsAdapter(Conversation, {
  agentId: 'your-agent-id',
})

export function ElevenLabsVoiceUI() {
  return <Orb adapter={adapter} theme="bars" aria-label="Start ElevenLabs assistant" />
}
For private agents, pass the server-generated signedUrl or conversationToken option that your app already gives to Conversation.startSession().

​
State mapping

The ElevenLabs adapter is responsible for normalizing provider events into orb-ui states. Keep the UI language simple:
  • connecting
  • listening
  • speaking
  • error

​
Theming

The circle theme works well for assistant-style voice interfaces. The bars theme is useful when you want a waveform-adjacent feel. 
<Orb adapter={adapter} theme="circle" aria-label="Start ElevenLabs assistant" />
<Orb adapter={adapter} theme="bars" aria-label="Start ElevenLabs assistant" />
Clickable themes render as <button type="button"> controls, so they work with keyboard activation and accept forwarded attributes like id, data-*, and aria-label.

​
Controlled mode

If your app owns more of the ElevenLabs session lifecycle, pass state and volume directly. 
<Orb state={state} volume={volume} theme="circle" />
Last modified on June 5, 2026