Styling Example

Customize the appearance of Vocobase components to match your brand.

Default Styles

Import the default styles:


import '@vocobase/voice-client-sdk/styles.css'

CSS Class Reference

Class	Description
`.vocobase-voice-agent`	Root container
`.vocobase-button`	Connect/disconnect button
`.vocobase-button-connect`	Button in connect state
`.vocobase-button-disconnect`	Button in disconnect state
`.vocobase-visualizer`	Audio visualizer container

Basic Customization

Change Button Colors


.vocobase-button-connect {
  background: #10b981;
}
 
.vocobase-button-connect:hover {
  background: #059669;
}
 
.vocobase-button-disconnect {
  background: #ef4444;
}

Rounded Buttons


.vocobase-button {
  border-radius: 9999px;
  padding: 14px 28px;
}

Dark Mode

CSS Variables Approach


:root {
  --vocobase-bg: #ffffff;
  --vocobase-primary: #6366f1;
  --vocobase-danger: #ef4444;
}
 
@media (prefers-color-scheme: dark) {
  :root {
    --vocobase-bg: #1e293b;
    --vocobase-primary: #818cf8;
    --vocobase-danger: #f87171;
  }
}
 
.vocobase-voice-agent {
  background: var(--vocobase-bg);
}
 
.vocobase-button-connect {
  background: var(--vocobase-primary);
}

Theme Examples

Minimal Light


.vocobase-button {
  background: #000000;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 16px 32px;
}
 
.vocobase-button:hover {
  opacity: 0.9;
}

Glassmorphism


.vocobase-voice-agent {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 24px;
}
 
.vocobase-button {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

Neon


.vocobase-voice-agent {
  background: #0a0a0a;
}
 
.vocobase-button {
  background: transparent;
  color: #00ff88;
  border: 2px solid #00ff88;
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
}
 
.vocobase-button:hover {
  background: #00ff88;
  color: #0a0a0a;
  box-shadow: 0 0 30px rgba(0, 255, 136, 0.5);
}

Visualizer Customization

Via Props


<VoiceAgent
  visualizer={{
    barCount: 40,
    barColor: '#6366f1',
    barGap: 2,
    barWidth: 3,
    barMaxHeight: 80
  }}
/>

Via CSS


.vocobase-visualizer {
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border-radius: 12px;
  padding: 20px;
}

Animations

Button Pulse


.vocobase-button-connect {
  animation: pulse-shadow 2s infinite;
}
 
@keyframes pulse-shadow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  50% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); }
}

Accessibility


/* Visible focus indicators */
.vocobase-button:focus-visible {
  outline: 2px solid #6366f1;
  outline-offset: 2px;
}
 
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .vocobase-button,
  .vocobase-visualizer {
    animation: none;
    transition: none;
  }
}