# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xy.finance/bridge-aggregator-integration/xy-finance-widget-npm/install-the-widget.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.