Install

Install @velora-dex/widget and render the swap widget in your React app.

The Velora Widget is a React component published as @velora-dex/widget. Install it alongside @tanstack/react-query and render it anywhere in your component tree.

Install the package

pnpm

pnpm add @velora-dex/widget @tanstack/react-query

Peer dependencies

Package	Version
react	18.x or 19.x
react-dom	18.x or 19.x
@tanstack/react-query	^5.90

Render the widget

Drop <Widget /> anywhere in your component tree. @tanstack/react-query only needs to be installed; the widget manages its own query client, so no provider setup is required.

import { Widget } from "@velora-dex/widget";

export default function App() {
  return <Widget />;
}

That’s it. The widget mounts with sensible defaults: system-preference theme, all supported chains, Delta enabled, and built-in wallet connectors.

The widget’s compiled stylesheet is auto-injected when you import Widget, so no extra .css import is required. If your bundler strips side-effect imports aggressively, you can force-include it with import "@velora-dex/widget/styles.css".

Verify it works

You should see the swap form render with:

• A Connect Wallet button in the header
• Source and destination token pickers
• A trade-mode toggle (Swap / Limit / OTC / TWAP)

Next steps

Configure

Restrict chains, pick trade modes, set theme, hide UI elements.

Wallet management

Use the built-in wallet connectors or bring your own EIP-1193 provider.

Monetize

Collect partner fees on every swap routed through your integration.

Framework examples

Working setups for Vite + React and Next.js app router.