> For the complete documentation index, see [llms.txt](https://docs.xy.finance/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/install-the-widget.md).

# Install the Widget

## Installation

To use XY Finance widget in your project, run the following command in your terminal:

* For React 18, Vite, Next.js

{% tabs %}
{% tab title="npm" %}

```bash
npm install @xyfinance/widget
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm install @xyfinance/widget
```

{% endtab %}

{% tab title="bun" %}

```bash
bun install @xyfinance/widget
```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
We use the latest versions of popular web3 libraries such as [Viem](https://viem.sh/) and [Wagmi](https://wagmi.sh/). If you can't install our widget due to an outdated project, please [contact us](https://discord.com/channels/874214080272007200/951113229902442496) or try installing our v3 version widget via `npm install @xyfinance/widget@legacy-v3` instead.
{% endhint %}

```tsx
import { Widget } from '@xyfinance/widget'

const config = {
  disabledChains: [],
  fromInput: '0.1',
  fromToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '1'
  },
  toToken: {
    address: '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE',
    chainId: '56'
  },
  referrer: '0xFD19727868A8197F42e7a52d024374598F62953B',
  featuredTokens: [
    {
      address: '0x666666661f9B6D8c581602AAa2f76cbead06C401',
      chainId: '56'
    }
  ]
}

const theme = {
  mode: 'light',
  fontFamily: 'proxima-nova',
  borderRadius: {
    container: '12px',
    inner: '8px',
    button: '32px'
  },
  colors: {
    primary: '#277EEC',
    gradient: ['#277EEC', '#1499E4']
  },
  components: {
    button: {
      variant: 'gradient'
    }
  }
}

export default function App() {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        height: '100vh',
        margin: '0px auto'
      }}
    >
      <div
        style={{
          width: '480px'
        }}
      >
        <Widget config={config} theme={theme} />
      </div>
    </div>
  )
}
```

<figure><img src="/files/Z59EtmoSlIaQmLu0D67b" alt=""><figcaption></figcaption></figure>

## **TypeScript**

For users of TypeScript, you can import both the `Config` and `Theme` type to understand what properties are available for configuration:

```tsx
import { Widget, type Config, type Theme } from '@xyfinance/widget'

const config: Config = {
  ...,
  fromInput: '12.345',
}

const theme: Theme = {
  ...,
  mode: 'light'
}

function App() {
  return (
    <div>
      <Widget config={config} theme={theme} />
    </div>
  )
}
```

## Example

Check out our [**examples repository**](https://github.com/XY-Finance/examples).

{% hint style="info" %}
Please refer to our [Widget API Reference](/bridge-aggregator-integration/xy-finance-widget-npm/widget-api-reference.md) for a comprehensive overview of available configuration options.
{% endhint %}