Install the Nexus Widget and its dependencies in your project.
In this guide, you will install Nexus Widget — the single unified component for all swap, send, and deposit flows — into an existing React project. By the end, your project will be ready for the provider setup in the next step.
Prerequisites
Before you begin, make sure your project meets the following requirements:
React 18+ with a framework like Next.js, Vite, or similar
Node.js 24+ and a package manager (npm, pnpm, or yarn)
Why wagmi?
The widget needs access to the user's connected wallet provider to sign transactions. It is designed to work with wagmi's hooks, but any EIP-1193 compatible provider will work.
Interactive Configurator
Before installing, you can configure your widget live and copy the exact basic config for your desired widget using the Widget Configurator .
Installation Methods
Choose your preferred installation method below. NPM is the recommended method for fast integration without adding extra source files to your repository. shadcn/ui is available for power users who require full source code control and customization.
The npm package ships pre-compiled styles and components — no manual component file copying required.
Legacy standalone components
Earlier standalone elements (SwapWidget, FastBridge, FastTransfer, NexusDeposit, UnifiedBalance, ViewHistory) have been removed in favor of Nexus Widget. If you are upgrading from them, follow the Widgets migration guide.
Next step
Your dependencies are installed. Next, you will wire up the NexusProvider so the SDK can connect to the user's wallet.