> For a complete index of all SignalWire documentation pages, fetch https://signalwire.com/docs/llms.txt

# Overview

# Browser SDK Web Components

The Browser SDK contains a suite of flexible web components that can be used to create UI.

## Install

<CardGroup cols={2}>
  <Card title="npm" icon="brands npm" href="https://www.npmjs.com/package/@signalwire/web-components">
    @signalwire/web-components
  </Card>
</CardGroup>

```bash
npm install @signalwire/web-components@latest
```

Or load from a CDN:

```html
<script type="module" src="https://unpkg.com/@signalwire/web-components"></script>
```

---

## Components

Ready-to-use call UI elements. Most components consume context from a parent `<sw-call-provider>` (or `<sw-call-media>`) automatically.

| Component | Description |
|-----------|-------------|
| [`<sw-audio-level>`](/docs/browser-sdk/v4/reference/web-component/sw-audio-level) | Real-time audio level visualizer — animated bar graph |
| [`<sw-call-controls>`](/docs/browser-sdk/v4/reference/web-component/sw-call-controls) | Mute audio, mute video, screen share, and hangup buttons |
| [`<sw-call-dialpad>`](/docs/browser-sdk/v4/reference/web-component/sw-call-dialpad) | Context-aware DTMF dialpad — sends tones to the active call or bubbles a `sw-dial` event |
| [`<sw-call-media>`](/docs/browser-sdk/v4/reference/web-component/sw-call-media) | Remote video container and root context provider — wrap call components inside it |
| [`<sw-call-provider>`](/docs/browser-sdk/v4/reference/web-component/sw-call-provider) | Top-level context provider that bridges an external `Call` and `DeviceController` into Lit context |
| [`<sw-call-status>`](/docs/browser-sdk/v4/reference/web-component/sw-call-status) | Displays call state label and elapsed duration timer |
| [`<sw-call-widget>`](/docs/browser-sdk/v4/reference/web-component/sw-call-widget) | All-in-one call widget — handles client init, dialing, media, controls, and optional AI transcript |
| [`<sw-click-to-call>`](/docs/browser-sdk/v4/reference/web-component/sw-click-to-call) | Single-button widget that dials on click and shows mute/hangup once connected |
| [`<sw-device-selector>`](/docs/browser-sdk/v4/reference/web-component/sw-device-selector) | Drop-up buttons for microphone, camera, and speaker selection with optional live preview |
| [`<sw-directory>`](/docs/browser-sdk/v4/reference/web-component/sw-directory) | Searchable contact list with dial actions from the SDK directory |
| [`<sw-local-camera>`](/docs/browser-sdk/v4/reference/web-component/sw-local-camera) | Local camera preview with a muted overlay |
| [`<sw-participant-controls>`](/docs/browser-sdk/v4/reference/web-component/sw-participant-controls) | Per-participant moderation controls: mute, video mute, remove, volume, pin |
| [`<sw-participants>`](/docs/browser-sdk/v4/reference/web-component/sw-participants) | Renders positioned overlays for each remote participant |
| [`<sw-self-media>`](/docs/browser-sdk/v4/reference/web-component/sw-self-media) | Local video preview — consumes `callContext` from a parent `<sw-call-media>` |

---

## UI Primitives

Low-level layout and control components used to build custom interfaces. These are presentational and do not couple to the SDK.

| Component | Description |
|-----------|-------------|
| [`<sw-ui-alert>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-alert) | Confirm / alert dialog primitive — use directly or via the `showPrompt()` helper |
| [`<sw-ui-background>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-background) | Decorative full-bleed background that crossfades from a blurred thumbnail to a hi-res image |
| [`<sw-ui-call-layout>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-call-layout) | Fluid call layout — splits into video + transcript based on container aspect ratio |
| [`<sw-ui-content-drawer>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-content-drawer) | Slide-in drawer for agent-pushed content (markdown, HTML, snippets) mid-call |
| [`<sw-ui-control-bar>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-control-bar) | Call controls bar: mic, camera, speaker, screen share, hand raise, transcript, fullscreen, hang-up |
| [`<sw-ui-dialpad>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-dialpad) | Presentational 12-key DTMF keypad — pure UI, no SDK coupling |
| [`<sw-ui-dropup>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-dropup) | Tiny pop-up menu that opens above its anchor and closes on outside click |
| [`<sw-ui-icon>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-icon) | Inline SVG icon component backed by the bundled icon set |
| [`<sw-ui-modal>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-modal) | Native `<dialog>` wrapper with bounce-in/out animations and body scroll lock |
| [`<sw-ui-responsive-container>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-responsive-container) | Aspect-ratio-aware sizing wrapper for hosting call surfaces inside a modal |
| [`<sw-ui-split-button>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-split-button) | Pill-shaped icon button with optional chevron dropdown — atomic block for control bars |
| [`<sw-ui-transcript-view>`](/docs/browser-sdk/v4/reference/web-component/sw-ui-transcript-view) | Chat-bubble timeline rendering AI transcript entries with rich `meta` payloads |