Widget Kit is a set of React components and adapters that let you embed blockchain interactions — swaps, transfers, cross-chain bridges — directly in React and Next.js apps. It is built on a self-custodial architecture: Relayer never holds your private keys. Transaction signing happens either through Relayer’s hosted passkey flow or through your own wallet stack, depending on which integration mode you choose.Documentation Index
Fetch the complete documentation index at: https://docs.relayer.fi/llms.txt
Use this file to discover all available pages before exploring further.
Two Integration Modes
Widget Kit supports two integration modes. The mode is determined by your wallet stack, not the widget type — every widget works with both modes.- Passkey Signing
- Metadata Mode
For integrators using Relayer’s managed wallet stack.In Passkey Signing, each integrator gets a dedicated wallet workspace with passkey-based signing. The widget handles the full signing flow internally:
- Widget sends the transaction to the Relayer API for preparation
- User sees a biometric prompt (Face ID, fingerprint, security key)
- The secure enclave signs the transaction using the user’s passkey
- Relayer API validates and broadcasts the signed transaction
Self-Custodial Architecture
Passkey Signing Flow
Metadata Mode Flow
Supported Protocols
Widget Kit ships with first-party widgets for the canonical protocols Relayer supports. Custom widget metadata is not user-uploadable — every widget surface comes from this curated set.| Widget | What It Does |
|---|---|
| Swap | Token-to-token swaps via smart routing |
| Transfer | Native and ERC20 token transfers |
| Crosschain Transfer | Transfer the same asset across networks |
| Crosschain Bridge | Bridge assets between supported chains |
Each widget works with both Passkey Signing and Metadata Mode. The mode is determined by the integrator’s configuration, not the widget type.
Package Ecosystem
The Widget Kit is composed of three core packages:| Package | npm | Description | Audience |
|---|---|---|---|
| widget-kit-react | @relayerfi/widget-kit-react | Main integration library. React components (Widget), wallet adapters, platform observers for Twitter/X, YouTube, and Twitch. | App developers embedding widgets |
| widget-kit-core | @relayerfi/widget-kit-core | Framework-agnostic runtime. Widget directory, metadata fetching, security classification. Consumed internally. | Internal — no direct install needed |
| action-kit | @relayerfi/action-kit | Shared type and validator contract used by widget-kit. Defines metadata schemas for the canonical protocols. | Internal — no direct install needed |
You only install
@relayerfi/widget-kit-react directly. The other two packages are peer dependencies bundled internally.The Widget Component
Widget is the main embedding surface. It accepts a URL pointing to canonical action metadata (or a pre-validated metadata object) and renders an interactive widget card. The component handles metadata fetching, schema validation, wallet connection, and transaction signing automatically — you provide a URL and a wallet adapter, and the Widget does the rest.
In Passkey Signing, the Widget handles the passkey prompt automatically. In Metadata Mode, the Widget returns transaction metadata for the integrator to sign externally.
Platform Observers
The package ships observers for automatic widget detection and rendering on Twitter/X, YouTube, and Twitch. These observers scan the DOM for canonical action URLs and render Widget components inline. A browser extension built on the same primitives is also available. For custom embedding in your own app, use theWidget component directly.
Next Steps
Installation
Install and configure the widget packages.
Integration Guide
Embed and theme your first widget.
SDK Reference
The metadata schema for canonical protocols.