nexus-elements-overview
Nexus Elements Overview
Integrate end-to-end in any TS/React app
- Install project deps:
pnpm add @avail-project/nexus-core wagmi viem lucide-react
- If using wagmi (recommended), also install:
pnpm add @tanstack/react-query
- Ensure shadcn/ui is initialized (
components.jsonexists) if installing from registry.
Configure registry
- Add this mapping in
components.json:
"registries": {
"@nexus-elements/": "https://elements.nexus.availproject.org/r/{name}.json"
}
Set up SDK + wallet foundation first
- Install and wire
nexus-providerbefore any other element:
More from availproject/nexus-elements
nexus-elements-deposit
Integrate the Deposit element for swap-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging destination-fixed deposits, execute call builders, swap-intent confirmation UX, and `sdk.swapAndExecute` progress from quote to completion.
26nexus-elements-common
Use shared Nexus Elements hooks, transaction-step helpers, and constants to build custom Nexus UX. Use when extending widgets or implementing custom bridge/transfer/swap/deposit flows that need debouncing, polling, step orchestration, or Nexus error normalization.
23nexus-elements-nexus-provider
Install and configure NexusProvider for Nexus Elements with full SDK lifecycle wiring. Use when setting up or debugging SDK initialization, wallet/provider connection, hook attachment (intent/allowance/swapIntent), balance preloads, exchange-rate support, and provider context consumption in React/TypeScript apps.
23nexus-elements-bridge-deposit
Integrate the Bridge Deposit element for bridge-plus-execute deposit flows in React/TypeScript apps. Use when installing or debugging source-chain constrained deposits, bridge+execute simulation, intent/allowance approvals, and `sdk.bridgeAndExecute` transaction execution.
22nexus-elements-fast-bridge
Integrate the FastBridge element for intent-based cross-chain bridge UX in React/TypeScript apps. Use when installing or debugging self-bridge flows, source-chain selection, allowance gating, step progress events, and `sdk.bridge` execution end-to-end.
21nexus-elements-unified-balance
Integrate the UnifiedBalance element for cross-chain token balance views in React/TypeScript apps. Use when installing or debugging bridgeable/swappable balance aggregation, per-chain breakdown rendering, and formatting powered by Nexus SDK balance APIs.
21