> ## Documentation Index
> Fetch the complete documentation index at: https://docs.bungee.exchange/llms.txt
> Use this file to discover all available pages before exploring further.

# Bungee Widget

> Bungee Widget is a powerful React widget that enables seamless token swaps and bridging across multiple blockchains. It can be quickly integrated into any modern web app, giving your users the full bridging UX from within your app.

<Check>
  Bungee Widget can be integrated quickly to add swaps and bridging features to any web app.
</Check>

## Why Use Bungee Widget?[​](#why-use-bungee-widget "Direct link to Why Use Bungee Widget?")

* Swaps & bridging in one component
* Customizable appearance & configuration
* Integrates easily with wallet connection solutions
* Fully up-to-date on [npm](https://www.npmjs.com/package/@socket.tech/bungee)

## Quick Integration Guide[​](#quick-integration-guide "Direct link to Quick Integration Guide")

<Info>
  For the full implementation details, advanced usage, and examples—including configuration, theming, and customization options—always refer to the [npm README](https://www.npmjs.com/package/@socket.tech/bungee).
</Info>

### 1. Install the package[​](#1-install-the-package "Direct link to 1. Install the package")

```
npm install @socket.tech/bungee
```

### 2. Basic Usage[​](#2-basic-usage "Direct link to 2. Basic Usage")

```typescript theme={null}
import { Bungee, type BungeeConfig } from "@socket.tech/bungee";

const config: BungeeConfig = {
  apiKey: "your-api-key-here",
};

export default function App() {
  return <Bungee config={config} />;
}
```

## More Resources & Support[​](#more-resources--support "Direct link to More Resources & Support")

Refer to the package README for comprehensive integration guidance:

* Installation steps and peer dependencies
* Importing and usage in your React app
* Theming and configuration options
* Event and imperative APIs
* TypeScript types & advanced customization