> ## Documentation Index
> Fetch the complete documentation index at: https://digraphsas-docs-cli.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Velora Widget React example

> End-to-end widget integration for a Vite + React app: full file tree, install, and mount.

A minimal Vite + React app that mounts the Velora Widget. Copy each file and run `pnpm dev` (or `npm run dev`).

## File tree

```text theme={null}
my-app/
├─ index.html
├─ package.json
├─ vite.config.ts
└─ src/
   ├─ main.tsx
   └─ App.tsx
```

## Install

<CodeGroup>
  ```bash pnpm theme={null}
  pnpm create vite@latest my-app -- --template react-ts
  cd my-app
  pnpm add @velora-dex/widget @tanstack/react-query
  ```

  ```bash npm theme={null}
  npm create vite@latest my-app -- --template react-ts
  cd my-app
  npm install @velora-dex/widget @tanstack/react-query
  ```

  ```bash yarn theme={null}
  yarn create vite my-app --template react-ts
  cd my-app
  yarn add @velora-dex/widget @tanstack/react-query
  ```
</CodeGroup>

## `src/App.tsx`

```tsx theme={null}
import { useMemo } from "react";
import { Widget } from "@velora-dex/widget";

export default function App() {
  const config = useMemo(
    () => ({
      theme: "light" as const,
      partnerConfig: { partner: "my-app-name" },
    }),
    []
  );

  return (
    <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
      <Widget config={config} />
    </div>
  );
}
```

## `src/main.tsx`

```tsx theme={null}
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <App />
  </StrictMode>
);
```

## Run it

```bash theme={null}
pnpm dev
```

Open the printed `http://localhost:5173` URL. You should see the widget render with the **Connect Wallet** button and a swap form.

## Next: wire in events and a `partner` identifier

```tsx theme={null}
import { Widget } from "@velora-dex/widget";

<Widget
  config={{
    theme: "light",
    partnerConfig: {
      partner: import.meta.env.VITE_VELORA_PARTNER,
      partnerFeeBps: 25,
    },
  }}
  events={{
    onSwap: ({ event }) => {
      if (event.name === "Swap:confirmed") {
        console.log("Swap confirmed", event.params.txHash);
      }
    },
  }}
/>;
```

Add the `partner` identifier to `.env`:

```env theme={null}
VITE_VELORA_PARTNER=my-app-name
```

## Related pages

* [Install](/widget/install) — package install and the basic setup.
* [Configure](/widget/configure) — restrict chains, modes, hide UI.
* [Monetize](/widget/monetize) — partner fees and referrer.
* [Events & callbacks](/widget/events-and-callbacks) — every event you can subscribe to.