# Quick Start

This page walks through the minimum setup required to embed the WheelX Widget inside a Next.js app.

## ✅ Requirements

Before installing, make sure your host app matches the current package requirements:

| Item      | Required Version |
| --------- | ---------------- |
| Node.js   | `>= 20`          |
| pnpm      | `>= 10`          |
| Next.js   | `>= 15`          |
| React     | `19.x`           |
| React DOM | `19.x`           |

## 📥 Install

```bash
pnpm add @wheelx/widget @rainbow-me/rainbowkit
```

If your app does not already include RainbowKit styles, import them once in your app entry:

```tsx
import '@rainbow-me/rainbowkit/styles.css'
```

## 🧱 Minimal Integration

```tsx
'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider
} from '@wheelx/widget'

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget />
    </WheelxWidgetProvider>
  )
}
```

This is the fastest way to get a working widget on screen.

## ⚙️ Add Config

Once the base widget is mounted, pass a config object to control mode, defaults, supported assets, or theme:

```tsx
'use client'

import {
  WheelxBridgeSwapWidget,
  WheelxWidgetProvider,
  type WheelxWidgetConfig
} from '@wheelx/widget'

const widgetConfig: WheelxWidgetConfig = {
  mode: 'bridge-and-swap',
  referralCode: 'your-affiliate-code'
}

export default function Page() {
  return (
    <WheelxWidgetProvider>
      <WheelxBridgeSwapWidget config={widgetConfig} />
    </WheelxWidgetProvider>
  )
}
```

## 🛠️ Next Step

After the minimal integration works, continue with:

* chain restriction
* token restriction
* theme customization
* referral setup

Those are covered in the next pages.