Widget

A drop-in React component that adds cross-chain bridging to your application

The Superbridge Widget is a drop-in React component that adds cross-chain bridging to your application with minimal code.

Installation

npm install @superbridge/widget

Quick Start

import { SuperbridgeWidget } from "@superbridge/widget";

function App() {
  return (
    <SuperbridgeWidget
      apiKey="your-api-key"
      theme="light"
    />
  );
}

Customization

Theming

The widget supports both light and dark themes out of the box, and can be customized with your own color palette.

Chain Filtering

Restrict the widget to specific chains by passing an allow-list:

<SuperbridgeWidget
  apiKey="your-api-key"
  chains={[1, 10, 8453]}
/>

Event Handlers

Listen for bridging events to update your application state:

<SuperbridgeWidget
  onBridgeStart={(tx) => console.log("Bridge started", tx)}
  onBridgeComplete={(tx) => console.log("Bridge complete", tx)}
/>

Styling

The widget is designed to blend into your application. Override CSS variables or pass a custom theme object to match your brand.