Open source · shadcn/ui · Tailwind v4

Voice Agent UI, ready to ship.

React components for Deepgram Voice Agent. Built on shadcn/ui and Tailwind v4. Copy any component into your project in one command.

$ npx shadcn add https://cdn.deepgram.com/ui/r/orb.json

View on GitHub

Or install via npm: npm install @deepgram/ui

Components

shadcn/ui

Built on

Tailwind v4

Styling

MIT

License

REGISTRY MODEL

You own the code.

Components are copied into your project — not imported from a black box. Customize freely. No breaking updates.

Pick a component

Browse the registry. Each component is a self-contained .tsx file with Tailwind classes and Radix primitives.

$ npx shadcn add
  …/ui/r/orb.json

It lands in your project

The file is copied to components/ui/. npm deps are installed automatically. You own the source.

✓ components/ui/Orb.tsx
✓ @deepgram/react

Use it

Import, wrap in AgentProvider, done. All components consume @deepgram/react hooks under the hood.

import { Orb } from
  "@/components/ui/Orb"

ALL COMPONENTS

Everything you need.

From animated orbs to accessible mic selectors. Each component is production-ready and fully themeable.

orb

Animated canvas orb — idle / listening / talking states, audio-reactive

voice-button

All-in-one voice button with 5 lifecycle states — idle, connecting, listening, speaking, error

agent-conversation

Scrollable transcript with auto-scroll and role-based bubble variants

agent-text-input

Accessible text input with shadcn Textarea and send Button

agent-microphone-button

Radix Toggle for mic mute/unmute with 4 states

agent-speaker-button

Radix Toggle for speaker mute/unmute

agent-start-button

Start/stop session button — fill vs ghost based on state

agent-status

Inline status indicator reflecting agent connection state

mic-selector

Microphone device picker with permission handling — powered by Radix Select

response

Lightweight markdown renderer with Tailwind Typography prose

bar-visualizer

Real-time audio frequency bar visualizer (canvas)

live-waveform

Canvas waveform driven by a volume getter function

ALSO ON NPM

Prefer a managed
dependency?

@deepgram/ui is also published to npm. Pre-compiled CSS bundled in — no Tailwind setup required. Same components, managed versioning.

Zero config

Import a component, styles are included automatically.

Versioned releases

Pin to a version, get predictable updates.

Same source

Registry and npm package share identical source files.

# Install

$ npm install @deepgram/ui

# Use

import { AgentProvider } from '@deepgram/react'

import { Orb, VoiceButton } from '@deepgram/ui'

# Styles auto-included — no extra import needed

Start building now.

Add your first component, wire up AgentProvider, and ship a voice agent in minutes.

Read the docs Star on GitHub