---
title: Get Started with Connect
description: Follow this guide to configure and use the Connect UI widget to easily add an intuitive, multichain asset transfer UI to your web applications.
categories:
- Connect
- Transfer
url: https://wormhole.com/docs/products/connect/get-started/
word_count: 616
token_estimate: 1119
---

# Get Started with Connect

:simple-github: [Source code on GitHub](https://github.com/wormhole-foundation/demo-basic-connect){target=\_blank}

Connect helps you to easily add an intuitive, multichain asset transfer UI to your web applications. The guide demonstrates how to configure the Connect widget, add it to a React application, and view it locally.

## Install Connect

To install the [Wormhole Connect npm package](https://www.npmjs.com/package/@wormhole-foundation/wormhole-connect){target=\_blank}, run the following command:

```bash
npm i @wormhole-foundation/wormhole-connect
```

## Prerequisites

Before you begin, make sure you have the following:

- [Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm){target=\_blank}.

- (Optional) To test a transfer from your demo app, you'll need:

    - A wallet with [Sui testnet tokens](https://faucet.sui.io/){target=\_blank}.
    - A wallet with an Avalanche Fuji address (to use as the recipient; no tokens required).

## Install and Set Up Project

1. Clone the demo repository and navigate to the project directory:

    ```bash
    git clone https://github.com/wormhole-foundation/demo-basic-connect.git
    cd demo-basic-connect
    ```

2. Install the dependencies. This example uses the Connect version `5.1.1`:

    ```bash
    npm install
    ```

3. Start the application:

    ```bash
    npm start
    ```

4. Open your browser to `http://localhost:3000` to view the application locally.

    ![Deployed Connect Widget](/docs/images/products/connect/tutorials/react-dapp/get-started/connect-get-started-01.webp)

## Configure Connect

Open the `App.tsx` file in your code editor of choice. You will see code similar to the following:

```typescript title="App.tsx"
import './App.css';
import WormholeConnect, { type config, WormholeConnectTheme } from '@wormhole-foundation/wormhole-connect';

function App() {
  const config: config.WormholeConnectConfig = {
    // Define the network
    network: 'Testnet',

    // Define the chains
    chains: ['Sui', 'Avalanche'],

    // UI configuration
    ui: {
      title: 'SUI Connect TS Demo',
    },
  };

  const theme: WormholeConnectTheme = {
    // Define the theme
    mode: 'dark',
    primary: '#78c4b6',
  };

  return <WormholeConnect config={config} theme={theme} />;
}

export default App;
```

The preceding sample code configures Connect by setting values inside `config` and `theme` as follows:

- **Defines the network**: Options include `Mainnet`, `Testnet`, or `Devnet`.
- **Defines chains to include**: This example uses Sui and Avalanche. See the complete list of [Connect-supported chain names](https://github.com/wormhole-foundation/wormhole-sdk-ts/blob/main/core/base/src/constants/chains.ts){target=\_blank} if you would like to use different chains.
- **Adds a title to UI**: (Optional) If defined, it will render above the widget in the UI.
- **Defines the theme**: This example sets the mode to `dark` and adds a primary color.

## Interact with Connect

Congratulations! You've successfully used Connect to create a simple multichain token transfer application. You can now follow the prompts in the UI to connect your developer wallets and send a test transfer.

## Next Steps

Use the following guides to configure your Connect instance and integrate it into your application.

<div class="grid cards" markdown>

-   :octicons-tools-16:{ .lg .middle } **Data Configuration**

    ---

    Learn how to specify custom networks and RPC endpoints, integrate different bridging protocols, add new tokens, and more.

    [:custom-arrow: View Data Configs](/docs/products/connect/configuration/data/)

-   :octicons-tools-16:{ .lg .middle } **Theme Configuration**

    ---

    Learn how to customize Connect's look and feel to match your application's branding.

    [:custom-arrow: View Theme Configs](/docs/products/connect/configuration/theme/)

-   :octicons-book-16:{ .lg .middle } **Integrate Connect into a React DApp**

    ---

    Learn how to integrate Connect into a React application, including setting up the widget and handling transfers.

    [:custom-arrow: Get Started](/docs/products/connect/tutorials/react-dapp/)

-   :octicons-tools-16:{ .lg .middle } **Wormhole Dev Arena**

    ---

    A structured learning hub with hands-on tutorials across the Wormhole ecosystem.

    [:custom-arrow: Explore the Dev Arena](https://arena.wormhole.com/){target=\_blank}

</div>