> ## 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 title="Recommended: JavaScript SDK with React Hooks" icon="react" color="#4779FE">
  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)](/javascript/reference/react-quickstart) to get started.
</Card>

## Usage

To get the bridge component setup, you’ll want to have your desired chains enabled In the Dynamic Dashboard, for example Ethereum and Starknet. Then, in your `index.tsx` (or wherever you render `DynamicContextProvider`, specify the `initialAuthenticationMode ` and [`bridgeChains`](/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.