LiveKit docs › React components › Components › BarVisualizer

---

# BarVisualizer

> ℹ️ **Note**
> 
> This feature is under active development and may change based on developer feedback and real-world usage.

Visualizes audio signals from a TrackReference as bars. If the `state` prop is set, it automatically transitions between VoiceAssistant states.

## Import

```typescript
import { BarVisualizer } from "@livekit/components-react";

```

## Remarks

For VoiceAssistant state transitions this component requires a voice assistant agent running with livekit-agents >= 0.9.0

## Usage

### Example 1

```tsx
function SimpleVoiceAssistant() {
  const { state, audioTrack } = useVoiceAssistant();
  return <BarVisualizer state={state} trackRef={audioTrack} />;
}

```

### Styling the BarVisualizer using CSS classes

```css
.lk-audio-bar {
 // Styles for "idle" bars
 }
.lk-audio-bar.lk-highlighted {
 // Styles for "active" bars
}

```

### Styling the BarVisualizer using CSS custom properties

```css
--lk-fg // for the "active" colour, note that this defines the main foreground colour for the whole "theme"
--lk-va-bg // for "idle" colour

```

### Using a custom bar template for the BarVisualizer

```tsx
<BarVisualizer>
  <div className="all the classes" />
</BarVisualizer>

```

the highlighted children will get a data prop of data-lk-highlighted for them to switch between active and idle bars in their own template bar

---

This document was rendered at 2026-10-12T06:12:51.227Z.
For the latest version of this document, see [https://docs.livekit.io/reference/components/react/component/barvisualizer.md](https://docs.livekit.io/reference/components/react/component/barvisualizer.md).

To explore all LiveKit documentation, see [llms.txt](https://docs.livekit.io/llms.txt).