Superfluid Widget · npm version License: MIT Twitter Follow

Superfluid Widget is the best way to start receiving ongoing real-time payments powered by the Superfluid Protocol. This React widget library is designed to provide an easy-to-use, customizable, and versatile payment solution that can be integrated into your application in a matter of minutes.

Table of Contents


You can install the Superfluid Widget using your favorite package manager. Please note that wagmi is a required peer dependency.


npm install --save @superfluid-finance/widget wagmi viem


yarn add @superfluid-finance/widget wagmi viem


pnpm add @superfluid-finance/widget wagmi viem


To use the Superfluid Widget in your React application, you need to follow these simple steps:

  1. Import the necessary components and dependencies.
import { WagmiConfig } from "wagmi";
import SuperfluidWidget from "@superfluid-finance/widget";
  1. Wrap your application with WagmiConfig and include the CheckoutWidget component.
<WagmiConfig config={wagmiConfig}>
{({ openModal }) => (
<button onClick={() => openModal()}>Open Superfluid Widget</button>

Now your users can start making real-time payments using the Superfluid Widget!


You can find examples of various use cases in the examples folder of this repository. We encourage you to explore them and adapt them to your specific application's requirements.


Superfluid Widget can be easily customized to fit your application's look and feel. The widget is built using MUI, so you can customize its appearance by passing the theme object to the WagmiConfig component. You can reference the default Material-UI theme for available customization options.

import { createMuiTheme } from "@material-ui/core/styles";

const customTheme = createMuiTheme({
palette: {
primary: {
main: "#ff9800",
secondary: {
main: "#f44336",

<SuperfluidWidget theme={customTheme}>{/* ... */}</SuperfluidWidget>;


We welcome all sorts of contributions, be it bug fixes, new features or documentation improvements. If you'd like to contribute, please follow these basic guidelines:

  1. Fork this repository and clone it to your local machine
  2. Create a new branch for your changes
  3. Make your changes and push them to your fork
  4. Create a pull request from your fork's branch to the original repository's master branch


The Superfluid Widget library is MIT licensed.

Generated using TypeDoc