> ## Documentation Index
> Fetch the complete documentation index at: https://spiceflow-docs.spicenet.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Spice Flow

> A single SDK that lets your application work across every major EVM chain. Users deposit with any asset on any chain and your app executes on the destination chain instantly.

<Warning>
  Spice Flow documentation is still being improved and not recommended for general use yet. If you wish to integrate, please message our CTO [here](https://t.me/karthikpariti)
</Warning>

## Quick Start

### Installation

```bash theme={null}
npm install @spicenet-io/spiceflow-ui
```

### Basic Setup

Wrap your app with `SpiceFlowProvider` and add `SpiceDeposit` to let users deposit assets from any chain:

```tsx theme={null}
import { SpiceFlowProvider, SpiceDeposit } from "@spicenet-io/spiceflow-ui";

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

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

## Core Components

<CardGroup cols={2}>
  <Card title="SpiceFlowProvider" icon="plug" href="/sdk/components#spiceflowprovider">
    Root provider that manages wallet connections, chains, and branding
  </Card>

  <Card title="SpiceDeposit" icon="arrow-down-to-line" href="/sdk/components#spicedeposit">
    Full deposit flow with token selection, wallet connection, and execution
  </Card>

  <Card title="SpiceWithdraw" icon="arrow-up-from-line" href="/sdk/components#spicewithdraw">
    Withdraw assets from Spice balance back to wallet
  </Card>

  <Card title="AccountDisplay" icon="user" href="/sdk/components#accountdisplay">
    Account overview popover with balance breakdown
  </Card>
</CardGroup>

## SDK Documentation

<CardGroup cols={2}>
  <Card title="Installation and Setup" icon="download" href="/sdk/installation">
    Get started with installation and configuration
  </Card>

  <Card title="Components" icon="window" href="/sdk/components">
    Complete component reference and props
  </Card>

  <Card title="Hooks" icon="code" href="/sdk/hooks">
    React hooks for building custom UIs
  </Card>

  <Card title="Styling" icon="palette" href="/sdk/styling">
    Customize components to match your brand
  </Card>
</CardGroup>

## Examples and Guides

<CardGroup cols={2}>
  <Card title="Quick Start" icon="rocket" href="/quickstart">
    Build your first Spice Flow app in 5 minutes
  </Card>

  <Card title="Native Swap Example" icon="arrow-right-arrow-left" href="/guides/native-swap">
    Complete code walkthrough for cross chain swaps
  </Card>

  <Card title="Best Practices" icon="shield-check" href="/guides/best-practices">
    Security guidelines and integration patterns
  </Card>

  <Card title="Configuration" icon="sliders" href="/sdk/configuration">
    Configure chains, providers, and execution modes
  </Card>
</CardGroup>

## Technical Deep Dive

<CardGroup cols={2}>
  <Card title="How It Works" icon="gear" href="/how-it-works">
    Understand the architecture behind Spice Flow
  </Card>

  <Card title="EIP 7702" icon="microscope" href="/deep-dive/eip7702">
    Learn about EIP 7702 delegation
  </Card>

  <Card title="API Reference" icon="terminal" href="/api-reference">
    REST API documentation for advanced use cases
  </Card>

  <Card title="Delegate Contract" icon="file-contract" href="/deep-dive/delegate">
    Deep dive into the on chain delegation contract
  </Card>
</CardGroup>

## Key Features

<Columns cols={2}>
  <Card title="Go Universal" icon="globe" href="/guides/native-swap">
    Make your application feel native to users across every major EVM compatible blockchain ecosystem.
  </Card>

  <Card title="Reduced Distribution Costs" icon="rocket" href="/quickstart">
    Access users and volume from every major blockchain ecosystem without the need to redeploy smart contracts.
  </Card>

  <Card title="Native, Bridge Free UX" icon="bolt" href="/frontend-integration/reactjs">
    Users deposit with existing wallets and assets on their preferred networks. No bridging, no gas management.
  </Card>

  <Card title="Easy to Integrate" icon="atom" href="/quickstart">
    Client side integration only. No smart contract changes needed. Drop in components and you're live.
  </Card>
</Columns>

## Need Help?

<Card title="Join our Community" icon="users" href="https://discord.gg/spicenetio">
  Get help from our community and team on Discord.
</Card>

<Card title="Message our CTO" icon="flag" href="https://t.me/karthikpariti">
  Connect with our CTO to get your questions answered and request a personalized, white glove onboarding to Spice Flow.
</Card>