> 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. # Web Components `@signalwire/web-components` is a set of custom HTML elements built on [Lit](https://lit.dev) that wraps the Browser SDK in declarative markup. They work in vanilla HTML, React, Vue, Angular, or server-rendered templates — no imperative JavaScript required for the common cases. The headline element is [``], which owns the full call lifecycle (client init, dialing, media, controls, optional AI transcript) and renders inline or as a modal. Around it sits a family of composable primitives — ``, ``, ``, ``, and the `sw-ui-*` presentational layer — that can be used à la carte. See the [Web Components reference](/docs/browser-sdk/v4/reference/web-component) for the full element list. ## Two ways to load the library #### Embed bundle A single self-contained `

``` SDK classes are available on the global for programmatic use: ```html ``` Pick the embed pathway for marketing sites, landing pages, and CMS templates — anywhere a single copy-pasteable URL is the goal. ## npm pathway Install the components alongside `@signalwire/js` and `rxjs` (peer dependencies): ```bash npm install @signalwire/web-components@latest @signalwire/js@latest rxjs ``` Register every element with a side-effect import: ```js import "@signalwire/web-components"; ``` Or import only the elements in use: ```js import "@signalwire/web-components/sw-call-widget"; import "@signalwire/web-components/sw-ui-background"; ``` Use them anywhere in markup or JSX: ```html

``` SDK classes import from `@signalwire/js`: ```js import { SignalWire, StaticCredentialProvider } from "@signalwire/js"; ``` For framework-specific wrappers (React, Vue, Svelte), see [Framework Integration](/docs/browser-sdk/v4/guides/framework-integration). ## Anatomy of a widget [``] is the simplest entry point — set `token` and `destination` and it handles the rest. Internally it composes the same primitives that are available individually: ```html

``` `` sets up reactive contexts (call state, devices, transcript, user events) that descendants subscribe to automatically. Reach for the primitives when the built-in layout doesn't fit the design. ## Next * [Click-to-Call Widget](/docs/browser-sdk/v4/guides/click-to-call-widget) — single call button. * [Theming](/docs/browser-sdk/v4/guides/web-components-theming) — design tokens and CSS Parts. * [Customization](/docs/browser-sdk/v4/guides/web-components-customization) — slots, events, primitives. * [Web Components reference](/docs/browser-sdk/v4/reference/web-component) — per-element attributes, events, and slots. [``]: /docs/browser-sdk/v4/reference/web-component/sw-call-widget