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

# DynamicBridgeWidget

> The `DynamicBridgeWidget` component allows you to handle multi chain bridging

> [card] Recommended: JavaScript SDK with React Hooks
>
> For new React apps, we recommend the JavaScript SDK with React Hooks (`@dynamic-labs-sdk/react-hooks`) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the [React quickstart (JavaScript SDK)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

## Usage

To get the bridge component setup, you’ll want to have your desired chains enabled in the Dynamic Console, for example Ethereum and Starknet. Then, in your `index.tsx` (or wherever you render `DynamicContextProvider`), specify the `initialAuthenticationMode ` and [`bridgeChains`](https://docs.dynamic.xyz/docs/react/reference/objects/wallets-by-chain) prop like so:

```typescript theme={"system"}
<DynamicContextProvider
  settings={{
    environmentId: "ENV_ID",
    initialAuthenticationMode: "connect-only",
    bridgeChains: [
      {
        chain: "EVM",
      },
      {
        chain: "STARK",
      },
    ],
  }}
>
  <App />
</DynamicContextProvider>
```

Then, in `app.tsx`:

```typescript theme={"system"}
import { DynamicBridgeWidget } from "@dynamic-labs/sdk-react-core";

export default function App() {
  return (
    <div className="App">
      <DynamicBridgeWidget />
    </div>
  );
}
```

And that's it! Now you're rendering our bridge widget.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.