Get Started
Install and configure Avail Widgets in your React project. Nexus Widget is the single unified component for all swap, send, and deposit flows.
Avail Widgets are shadcn-based components built on the Nexus SDK. Nexus Widget — the single unified component — handles swap, send, and deposit across chains.
Try Live Demo
Nexus Widget is the single unified component for all swap, send, and deposit flows. Choose your preferred install method:
Deposit Widget
Route funds into configured protocol opportunities with Nexus intents.
Swap and Bridge Widget
Swap and bridge assets across chains with the unified Nexus intent flow.
Send Widget
Send assets to any recipient on any chain with built-in progress tracking.
Try It Live
Install Nexus Widget
Install the package
pnpm add @avail-project/widgets
Peer dependencies:The package ships pre-compiled — no additional dependency installs or file copying required.viemandwagmiare required peer dependencies. Install them if you haven't already:pnpm add @avail-project/widgets viem wagmi @tanstack/react-query
Wrap your app with the provider
"use client";
import { NexusProvider } from "@avail-project/widgets";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return <NexusProvider config={{ network: "mainnet" }}>{children}</NexusProvider>;
}Initialize on wallet connect
"use client";
import { useEffect } from "react";
import { useAccount, useConnectorClient } from "wagmi";
import type { EthereumProvider } from "@avail-project/nexus-core";
import { useNexus } from "@avail-project/widgets";
export function InitNexusOnConnect() {
const { status, connector } = useAccount();
const { data: walletClient } = useConnectorClient();
const { handleInit } = useNexus();
useEffect(() => {
if (status !== "connected") return;
void (async () => {
const mobileProvider = walletClient
? ({ request: (args: unknown) => walletClient.request(args as never) } as EthereumProvider)
: undefined;
const desktopProvider = await connector?.getProvider();
const provider = mobileProvider ?? (desktopProvider as EthereumProvider | undefined);
if (!provider || typeof provider.request !== "function") return;
await handleInit(provider);
})();
}, [status, connector, walletClient, handleInit]);
return null;
}Use the widget
import { NexusWidget } from "@avail-project/widgets";
export function App({ address }: { address?: `0x${string}` }) {
return <NexusWidget config={{ mode: "swap" }} connectedAddress={address} />;
}- Deposit:
config.mode = "deposit"— route funds into a configured protocol or app action. - Swap and Bridge:
config.mode = "swap"— swap and bridge assets through one unified intent flow. - Send:
config.mode = "send"— send assets to a recipient.
How is this guide?