Skip to main content
Spice Flow documentation is still being improved and not recommended for general use yet. If you wish to integrate, please message our CTO here

Quick Start

Installation

npm install @spicenet-io/spiceflow-ui

Basic Setup

Wrap your app with SpiceFlowProvider and add SpiceDeposit to let users deposit assets from any chain:
import { SpiceFlowProvider, SpiceDeposit } from "@spicenet-io/spiceflow-ui";

function App() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <SpiceFlowProvider
      provider="privy"
      network="mainnet"
      nativeChainId={8453}
      brand={{ primaryColor: "#f97316", dark: true }}
    >
      <button onClick={() => setIsOpen(true)}>Deposit</button>
      <SpiceDeposit
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        depositBatches={yourBatches}
        styles={{ primaryColor: "#f97316" }}
      />
    </SpiceFlowProvider>
  );
}

Core Components

SpiceFlowProvider

Root provider that manages wallet connections, chains, and branding

SpiceDeposit

Full deposit flow with token selection, wallet connection, and execution

SpiceWithdraw

Withdraw assets from Spice balance back to wallet

AccountDisplay

Account overview popover with balance breakdown

SDK Documentation

Installation and Setup

Get started with installation and configuration

Components

Complete component reference and props

Hooks

React hooks for building custom UIs

Styling

Customize components to match your brand

Examples and Guides

Quick Start

Build your first Spice Flow app in 5 minutes

Native Swap Example

Complete code walkthrough for cross chain swaps

Best Practices

Security guidelines and integration patterns

Configuration

Configure chains, providers, and execution modes

Technical Deep Dive

How It Works

Understand the architecture behind Spice Flow

EIP 7702

Learn about EIP 7702 delegation

API Reference

REST API documentation for advanced use cases

Delegate Contract

Deep dive into the on chain delegation contract

Key Features

Go Universal

Make your application feel native to users across every major EVM compatible blockchain ecosystem.

Reduced Distribution Costs

Access users and volume from every major blockchain ecosystem without the need to redeploy smart contracts.

Native, Bridge Free UX

Users deposit with existing wallets and assets on their preferred networks. No bridging, no gas management.

Easy to Integrate

Client side integration only. No smart contract changes needed. Drop in components and you’re live.

Need Help?

Join our Community

Get help from our community and team on Discord.

Message our CTO

Connect with our CTO to get your questions answered and request a personalized, white glove onboarding to Spice Flow.