> Fetch clean Markdown by appending `.md` to any page URL under https://signalwire.com/docs or requesting it with the HTTP header `Accept: text/markdown`. The root index at https://signalwire.com/docs/llms.txt lists the available documentation indexes.
# Overview
# Browser SDK Web Components
The Browser SDK contains a suite of flexible web components that can be used to create UI.
## Install
#### [npm](https://www.npmjs.com/package/@signalwire/web-components)
@signalwire/web-components
```bash
npm install @signalwire/web-components@latest
```
Or load from a CDN:
```html
```
---
## Components
Ready-to-use call UI elements. Most components consume context from a parent `` (or ``) automatically.
| Component | Description |
| --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-audio-level) | Real-time audio level visualizer — animated bar graph |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-call-controls) | Mute audio, mute video, screen share, and hangup buttons |
| [``](/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 |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-call-media) | Remote video container and root context provider — wrap call components inside it |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-call-provider) | Top-level context provider that bridges an external `Call` and `DeviceController` into Lit context |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-call-status) | Displays call state label and elapsed duration timer |
| [``](/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 |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-click-to-call) | Single-button widget that dials on click and shows mute/hangup once connected |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-device-selector) | Drop-up buttons for microphone, camera, and speaker selection with optional live preview |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-directory) | Searchable contact list with dial actions from the SDK directory |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-local-camera) | Local camera preview with a muted overlay |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-participant-controls) | Per-participant moderation controls: mute, video mute, remove, volume, pin |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-participants) | Renders positioned overlays for each remote participant |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-self-media) | Local video preview — consumes `callContext` from a parent `` |
---
## 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 |
| --------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-alert) | Confirm / alert dialog primitive — use directly or via the `showPrompt()` helper |
| [``](/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 |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-call-layout) | Fluid call layout — splits into video + transcript based on container aspect ratio |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-content-drawer) | Slide-in drawer for agent-pushed content (markdown, HTML, snippets) mid-call |
| [``](/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 |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-dialpad) | Presentational 12-key DTMF keypad — pure UI, no SDK coupling |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-dropup) | Tiny pop-up menu that opens above its anchor and closes on outside click |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-icon) | Inline SVG icon component backed by the bundled icon set |
| [``](/docs/browser-sdk/v4/reference/web-component/sw-ui-modal) | Native `